Pinning

Sometimes it’s useful to pin something in one of four corners or simply centre it within the page. That’s usually done with absolute positioning. For this, we’ve created 5 helpful utility components. To use import from @marvelapp/ui:

import { PinBL, PinBR, PinCenter, PinTL, PinTR } from '@marvelapp/ui';

Each of these components does its corresponding task:

  • <PinTL /> will pin anything in the top left corner
  • <PinTR /> will pin anything in the top right corner
  • <PinBR /> will pin anything in the bottom right corner
  • <PinBL /> will pin anything in the bottom left corner
  • <PinCenter /> will pin anything in the centre of the page