--- title: "Card" pageTitle: "Fylgja Card" description: "Create grouped content with the Card for product items, Blog items or for a Dropdown Panel" npm: "@fylgja/card" git: "https://github.com/fylgja/fylgja/tree/main/components/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 You can install Fylgja Card via npm or other Node-based package managers like pnpm or bun: ```bash npm install @fylgja/card ``` Alternatively, you can use it directly via a CDN: ```html ``` ## Usage Once installed, you can import the full package with: ```css @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](https://open-props.style/) ### `--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`](https://fylgja.dev/library/utilities/#stretched-link) which makes the card clickable. ## Examples These examples demonstrate how you can use the Card component with various layout and content options. ### Media Card This example demonstrates how to apply layouts to the Card component. It's especially useful for highlighting featured blog posts or banners.
Exploring Fylgja in the Wilds

Exploring Fylgja in the Wilds

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto eius repellendus, eaque repellat esse rem repudiandae deserunt dicta excepturi exercitationem quod porro cumque id. Expedita iste vel illum libero quasi? Error quos illum soluta dolor pariatur doloremque aperiam ea amet, ad iusto expedita dolorum id fuga tenetur quasi suscipit reiciendis?

Read More

```html
Exploring Fylgja in the Wilds

Exploring Fylgja in the Wilds

...

Read More

``` ### Product Grid Using cards in a product grid is highly effective, as each card serves as a self-contained wrapper for individual content. As you can see, with just a few CSS utilities, you can easily create a fully functional product grid.
Sunny Cat Wallpaper

Sunny Cat Wallpaper

Dicta ea a, commodi reiciendis aut doloremque earum fugit ducimus officiis.

€18.99

Orange Fox Wallpaper

Orange Fox Wallpaper

Dicta ea a, commodi reiciendis aut doloremque earum fugit ducimus officiis.

€6.00

Dog keep Watch Wallpaper

Dog keep Watch Wallpaper

Dicta ea a, commodi reiciendis aut doloremque earum fugit ducimus officiis.

€112.56

```html
Sunny Cat Wallpaper

Sunny Cat Wallpaper

Dicta ea a, commodi reiciendis aut doloremque earum fugit ducimus officiis.

€18.99

...
```