Kern Component Library GitHub GitHub

Card

Quiet outlined container. Renders as a link when `href` is provided. Supports optional `slot:header` and `slot:footer` for structured layouts — use the companion partials (card-header, card-footer) for consistent inner spacing.

Default

A simple card with body content.

1{{ partial:components/primitives/card }}

2    <p class="text-muted-foreground text-sm">A simple card with body content.</p>

3{{ /partial:components/primitives/card }}

Header & Footer

Card Title

Optional subtitle or description.

Card body content goes here.

 1{{ partial:components/primitives/card }}

 2    {{ slot:header }}

 3        <p class="font-medium">Card Title</p>

 4        <p class="text-muted-foreground text-sm">Optional subtitle or description.</p>

 5    {{ /slot:header }}

 6    <p class="text-muted-foreground text-sm">Card body content goes here.</p>

 7    {{ slot:footer }}

 8        {{ partial:components/primitives/button label="Action" size="sm" /}}

 9        {{ partial:components/primitives/button label="Cancel" intent="ghost" size="sm" /}}

10    {{ /slot:footer }}

11{{ /partial:components/primitives/card }}

Clickable

Clickable card

The entire card is a link.

 
1{{ partial:components/primitives/card href="/" }}

2    <p class="font-medium">Clickable card</p>

3    <p class="text-muted-foreground mt-1 text-sm">The entire card is a link.</p>

4{{ /partial:components/primitives/card }}

Companions

Card Header Companion

Consistent spacing for title + subtitle pairs.

Card body content.

 1{{ partial:components/primitives/card }}

 2    {{ slot:header }}

 3        {{ partial:components/primitives/card-header }}

 4            {{ partial:components/primitives/heading level="h5" content="Card Header Companion" /}}

 5            <p class="text-muted-foreground text-sm">Consistent spacing for title + subtitle pairs.</p>

 6        {{ /partial:components/primitives/card-header }}

 7    {{ /slot:header }}

 8    <p class="text-muted-foreground text-sm">Card body content.</p>

 9    {{ slot:footer }}

10        {{ partial:components/primitives/card-footer }}

11            {{ partial:components/primitives/button label="Save" size="sm" /}}

12            {{ partial:components/primitives/button label="Cancel" intent="ghost" size="sm" /}}

13        {{ /partial:components/primitives/card-footer }}

14    {{ /slot:footer }}

15{{ /partial:components/primitives/card }}

Props

Name Type Default Description
as string div Root HTML element. Auto-overridden to `a` when `href` is present.
href string If present, renders as an anchor with interactive focus/hover styles
target string Anchor target attribute (_self, _blank, ...)
attrs string Additional raw HTML attributes passed to the root element
class string Additional classes merged via tw_merge (root element only)

Slots

Name Fallback / Default Description
default
footer
header

Source

 1{{#

 2    @name Card

 3    @desc Quiet outlined container. Renders as a link when `href` is provided. Supports optional `slot:header` and `slot:footer` for structured layouts — use the companion partials (card-header, card-footer) for consistent inner spacing.

 4    @param as string [div] - Root HTML element. Auto-overridden to `a` when `href` is present.

 5    @param href string - If present, renders as an anchor with interactive focus/hover styles

 6    @param target string - Anchor target attribute (_self, _blank, ...)

 7    @param attrs string - Additional raw HTML attributes passed to the root element

 8    @param class string - Additional classes merged via tw_merge (root element only)

 9#}}

10{{ _el = href ? 'a' : (as ?? 'div') }}

11{{ _interactive = (_el == 'a') ?= '

12    hover:border-foreground/25 cursor-pointer transition-colors

13    focus-visible:ring-offset-background focus-visible:ring-ring

14    focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none

15' }}

16{{ _class = 'rounded-default border-border bg-background text-foreground overflow-hidden border {_interactive} {class}'

17 | tw_merge }}

18<{{ _el }}

19    class="{{ _class }}"

20    {{ if _el == 'a' }}

21        {{ if href }}href="{{ href }}"{{ /if }}

22        {{ if target }}target="{{ target }}"{{ /if }}

23        {{ if target == '_blank' }}rel="noopener noreferrer"{{ /if }}

24    {{ /if }}

25    {{ attrs }}

26>

27    {{ if slot:header }}

28        <div class="border-border border-b px-5 py-4">

29            {{ slot:header }}

30        </div>

31    {{ /if }}

32    <div class="px-5 py-4">

33        {{ slot }}

34    </div>

35    {{ if slot:footer }}

36        <div class="border-border border-t px-5 py-4">

37            {{ slot:footer }}

38        </div>

39    {{ /if }}

40</{{ _el }}>

Dependencies

Packages

1composer require marcorieser/tailwind-merge-statamic