Card

The Card component provides a reusable pattern for card in the interface.

Meta first

ALT
Eyebrow

Heading

This is the meta (after title)

Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.

ALT
This is the meta (before title)

123 AVC Heading

Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.

Only slot

Here we've only sent data to the slot and nothing with the parameters.

Heading

SubHeading

Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.

Card with a collapsible body

ALT

Heading

Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.

Card images

The images can be set to cover 100% of the width or if you wish set padded to true to keep the image in the middle. You can also set a background color which can be seen in the example with padding.

ALT
Jul 1

Heading

Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.

ALT

123 AVC Heading

Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.

Card with date badge

Cards with date badges can be used to show the date of the card.

ALT
Jul 1

With image

lorem ipsum dolor sit amet, consectetur adipiscing elit

Jul 1

With Placeholder

lorem ipsum dolor sit amet, consectetur adipiscing elit

Jul 1

Without image

lorem ipsum dolor sit amet, consectetur adipiscing elit

Buttons

You can configure a card with buttons that will be rendered in the footer.

ALT

Heading

Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.

Linked card

Links whole card.

ALT

Heading

Linked card is not compatible with either dropdown or buttons. Markup will break if used togheter.

Container Aware

Enables container awareness on the component (adjusts layout depending on available space).

ALT

Heading

Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components. Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components. Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components. Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.


Heading

Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components. Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components. Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components. Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.

Resize the preview above to see the card's container aware feature.

Inset Inherit

Demonstrate inset inheritance on the component & subcomponents (adjusts padding depending on available space).

Heading

Accordion heading
Accordion content should keep the same inset rhythm as the rest of the card when the container grows.
Accordion heading
Accordion content should keep the same inset rhythm as the rest of the card when the container grows.
Accordion heading
Accordion content should keep the same inset rhythm as the rest of the card when the container grows.

Heading

Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components. Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components. Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components. Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.

Resize the preview above to see the card and nested accordion inherit the inset spacing.

Card has action

Adds visual effect to indicate that the card has an action attached (i.e. a link)

ALT

Heading

aaaa Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.

Hightlight Card

A modifier to highlight the card.

ALT

TEST

Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.

Accent

Gives the card a more plain styling with accent colors

Heading

SubHeading

Card illustration

Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.

Heading

SubHeading

Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.

Flat UI

Gives the card a flat style

ALT

Flat UI Cards

Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.

ALT

Flat UI Cards

Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.

API

Parameter Default Description
eyebrow
A smaller heading above the primary one
heading
The card heading
subHeading
A subheading below the heading, explaining more stuff.
meta
Small text below title, in meta style.
content
The card content
buttons
[] Array with buttons that has parameters like href, text and attributeList.
image
false A url to an image.
ratio
16:9 The ratio of the image
collapsible
false If the content should be collapsible.
tags
null A tags array
link
A hyperlink to another location.
linkText
The text of the link, if not set, the link will not be displayed.
date
false Preformatted date
dateBadge
false Display date as a badge. Requires image to be set.
hasPlaceholder
false If the card should have a placeholder, if the image is missing.
icon
false An array with the same specification as the icon component
iconBackgroundColor
null The background color of the icon
color
default The background color of the image.
metaFirst
false If the meta should be displayed before the heading.
headingAboveImage
false If the headings should be displayed above the image.
beforeContent
Slot content rendered before the predefined card layout inside the paint container.
afterContent
Slot content rendered after the predefined card layout inside the paint container.
floating
Slot content rendered in the card floating area.
aboveContent
Slot content rendered above the card content inside the body area.
belowContent
Slot content rendered below the card content inside the body area.
slot
Full custom card layout. Use card child components such as card__header, card__image, card__body, card__floating and card__footer to recreate card areas.

Subcomponents

Child components for card, including purpose and supported Blade parameters.

Card Body

Blade directive: @card__body()

Content placed in the card body area.

Parameter Default Type Purpose
slot
string Content placed in the card body area.
classList
[] array Additional CSS classes added to the wrapping element.
attributeList
[] array Additional HTML attributes added to the wrapping element.

Card Floating

Blade directive: @card__floating()

Content placed in the card floating area.

Parameter Default Type Purpose
slot
string Content placed in the card floating area.
classList
[] array Additional CSS classes added to the wrapping element.
attributeList
[] array Additional HTML attributes added to the wrapping element.

Card Footer

Blade directive: @card__footer()

Content placed in the card footer area.

Parameter Default Type Purpose
slot
string Content placed in the card footer area.
classList
[] array Additional CSS classes added to the wrapping element.
attributeList
[] array Additional HTML attributes added to the wrapping element.

Card Header

Blade directive: @card__header()

Content placed in the card header area.

Parameter Default Type Purpose
slot
string Content placed in the card header area.
classList
[] array Additional CSS classes added to the wrapping element.
attributeList
[] array Additional HTML attributes added to the wrapping element.

Card Image

Blade directive: @card__image()

Content placed in the card image area.

Parameter Default Type Purpose
slot
string Content placed in the card image area.
classList
[] array Additional CSS classes added to the wrapping element.
attributeList
[] array Additional HTML attributes added to the wrapping element.

CSS API

Variable Default Type Values Description
--c-card--border-width
var(--border-width) range - Controls the width of card borders and internal dividers.
--c-card--border-radius
var(--border-radius) range - Border Radius
--c-card--space
var(--space) range - Controls padding inside the card and spacing between card elements.
--c-card--color--surface
var(--color--surface) color - Controls the card surface, text contrast, border, and alternate layout colors.
--c-card--color--primary
var(--color--primary) color - Controls highlighted card details, including accent borders and accented header backgrounds.
--c-card--shadow-color
var(--shadow-color) rgba - Shadow Color
--c-card--shadow-amount
var(--shadow-amount) range - Multiplier for elevation shadows. 0 = none, 1 = default.
--c-card--color--surface-border
var(--color--surface-border) color - Manual companion token for borders on surface elements.
--c-card--color--surface-alt
var(--color--surface-alt) color - Manual companion token for subtle surface backgrounds.
--c-card--color--secondary
var(--color--secondary) color - Controls the background shown behind transparent images and SVG illustrations.
--c-card--color--surface-contrast
var(--color--surface-contrast) color - Used for text and icons on surface backgrounds with less contrast.
--c-card--color--surface-contrast-muted
var(--color--surface-contrast-muted) color - Derived muted contrast for text and icons on surface backgrounds.
--c-card--corner-shape
var(--corner-shape) select square, round, squircle, circular, bevel, scoop Corner Shape
--c-card--base
var(--base) range - Main unit that drives radius and spacing scales.
--c-card--color--primary-contrast
var(--color--primary-contrast) color - Primary Contrast
--c-card--font-size-200
var(--font-size-200) range - One step above base in the type scale. Equivalent to h6/subtitle.
--c-card--font-size-100
var(--font-size-100) range - Base font size.

Similar components

Code Accordion Brand