Fylgja Card
The Fylgja Card component allows you to group content together, for a more contained content element.
This component is ideal for building various UI elements such as Product items, Blog items or for a Dropdown Panel.
Installation
npm install @fylgja/cardpnpm add @fylgja/card<link href="https://cdn.jsdelivr.net/npm/@fylgja/card/index.min.css" rel="stylesheet">Usage
Once installed, you can import the full package with:
@import "@fylgja/card";Alternatively, if you only need specific parts, you can import them individually:
| Import Path | Description |
|---|---|
@fylgja/card/base |
Contains to core of the Card |
@fylgja/card/elevated |
Contains the --elevated modifier classes |
@fylgja/card/hover |
Contains the --hover modifier classes |
Modifiers
--elevated
The --elevated modifier unset the border color and add a shadow with a depth of 2 to the card.
This variant requires the Design Token --shadow-2.
This token is provided by the @fylgja/tokens or by other Token/Props frameworks such as Open Props
--hover
Simliar to the --elevated modifier, only instead this work on the hover interaction and does not unset the border.
This version uses a shadow dept of 4, so the Design Token --shadow-4 is required.
This modifier is paired best with solutions such as the stretched-link which makes the card clickable.
Examples
Ready made examples built on this component live in the Fylgja UI gallery:
- Card, the base recipe with a clickable variant
- Media Card, an image beside text that stacks on narrow screens
- Product Grid, cards reflowing by available width
FAQ
Do I need @fylgja/tokens to use the --elevated or --hover modifiers?
You need the --shadow-2 (for elevated) or --shadow-4 (for hover) design tokens available, but they don't have to come from @fylgja/tokens specifically. Any token system that defines those variables, like Open Props, works too, and you could also define them yourself.
How do I make the whole card clickable, not just the "Read More" link?
Pair the --hover modifier with the stretched-link utility on the link inside the card, as recommended above.
Can I use the Card component without any modifiers?
Yes, use @fylgja/card/base on its own for the core card look with a border, and add @fylgja/card/elevated or @fylgja/card/hover only if you need those modifiers.