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
Sep 19

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
Sep 19

With image

lorem ipsum dolor sit amet, consectetur adipiscing elit

Sep 19

With Placeholder

lorem ipsum dolor sit amet, consectetur adipiscing elit

Sep 19

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 Type Description
eyebrow
string -
heading
string -
subHeading
string -
meta
string -
content
?string -
buttons
[] array -
image
false ComponentLibrary\Integrations\Image\ImageInterface|array|boolean -
ratio
16:9 string -
collapsible
false boolean -
tags
null ?array -
link
string|boolean -
linkText
string -
date
false array|boolean -
dateBadge
false boolean -
hasPlaceholder
false boolean -
icon
false array|boolean|null -
iconBackgroundColor
null ?string -
color
default string -
containerAware
false boolean -
metaFirst
false boolean -
headingAboveImage
false boolean -
beforeContent
Illuminate\View\ComponentSlot|string -
afterContent
Illuminate\View\ComponentSlot|string -
floating
Illuminate\View\ComponentSlot|string -
aboveContent
Illuminate\View\ComponentSlot|string -
belowContent
Illuminate\View\ComponentSlot|string -
slot
Illuminate\Support\HtmlString|Illuminate\View\ComponentSlot|string|null -

Subcomponents

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

Card Body

Blade directive: @card__body()

-

Parameter Default Type Purpose
slot
Illuminate\Support\HtmlString|Illuminate\View\ComponentSlot|string|null -
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()

-

Parameter Default Type Purpose
slot
Illuminate\Support\HtmlString|Illuminate\View\ComponentSlot|string|null -
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()

-

Parameter Default Type Purpose
slot
Illuminate\Support\HtmlString|Illuminate\View\ComponentSlot|string|null -
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()

-

Parameter Default Type Purpose
slot
Illuminate\Support\HtmlString|Illuminate\View\ComponentSlot|string|null -
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()

-

Parameter Default Type Purpose
slot
Illuminate\Support\HtmlString|Illuminate\View\ComponentSlot|string|null -
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