Kern Component Library GitHub

Card

Quiet outlined container with optional header and footer slots.

Composition

Use companion partials inside card slots when you want consistent sub-layouts:

  • components/primitives/card-header
  • components/primitives/card-footer

Examples

Default

Content only. The base card is a quiet outlined container.

{{ partial:components/primitives/card class="max-w-sm" }}

    <p class="text-muted-foreground text-sm">Content only. The base card is a quiet outlined container.</p>

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

Slots

Card Header

Card with header and footer slots.

Footer actions 
{{ partial:components/primitives/card class="max-w-sm" }}

    {{ slot:header }}

        <p class="font-medium">Card Header</p>

    {{ /slot:header }}



    <p class="text-muted-foreground text-sm">Card with header and footer slots.</p>



    {{ slot:footer }}

        <span class="text-muted-foreground text-sm">Footer actions</span>

    {{ /slot:footer }}

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

Clickable

Clickable card

Rendered as <a> with interactive hover/focus styles.

 
{{ partial:components/primitives/card as="a" class="block max-w-sm" }}

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

    <p class="text-muted-foreground mt-1 text-sm">Rendered as &lt;a&gt; with interactive hover/focus styles.</p>

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

Companions

Companion header partial

Use this for heading + meta content.

Composed with Card Header and Card Footer companion partials.

{{ partial:components/primitives/card class="max-w-sm" }}

    {{ slot:header }}

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

            <p class="font-medium">Companion header partial</p>

            <p class="text-muted-foreground text-sm">Use this for heading + meta content.</p>

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

    {{ /slot:header }}



    <p class="text-muted-foreground text-sm">Composed with Card Header and Card Footer companion partials.</p>



    {{ slot:footer }}

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

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

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

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

    {{ /slot:footer }}

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

Props

Name Type Default Description
as string div Root HTML element
href string ## Composition Use companion partials inside card slots when you want consistent sub-layouts: - `components/primitives/card-header` - `components/primitives/card-footer` Link destination when rendering as an anchor
target string ## Composition Use companion partials inside card slots when you want consistent sub-layouts: - `components/primitives/card-header` - `components/primitives/card-footer` Anchor target attribute (_self, _blank, ...)
attributes string ## Composition Use companion partials inside card slots when you want consistent sub-layouts: - `components/primitives/card-header` - `components/primitives/card-footer` Additional raw HTML attributes passed to the root element
class string ## Composition Use companion partials inside card slots when you want consistent sub-layouts: - `components/primitives/card-header` - `components/primitives/card-footer` Additional classes merged via tw_merge (root element only)

Source

{{#

    @name Card

    @desc Quiet outlined container with optional header and footer slots.

    @param as string [div] - Root HTML element

    @param href string - Link destination when rendering as an anchor

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

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

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

#}}

{{ _element = as ?? 'div' }}

{{ _interactive_classes = '' }}

{{ if _element == 'a' }}

    {{ _interactive_classes = 'cursor-pointer transition-colors hover:border-foreground/25 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background' }}

{{ /if }}

{{ _classes = 'overflow-hidden rounded-default border border-border bg-background text-foreground {_interactive_classes} {class}'

 | tw_merge }}

<{{ _element }}

    class="{{ _classes }}"

    {{ if _element == 'a' }}

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

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

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

    {{ /if }}

    {{ attributes }}

>

    {{ if slot:header }}

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

            {{ slot:header }}

        </div>

    {{ /if }}

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

        {{ slot }}

    </div>

    {{ if slot:footer }}

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

            {{ slot:footer }}

        </div>

    {{ /if }}

</{{ _element }}>

Dependencies

Packages

marcorieser/tailwind-merge-statamic

composer require marcorieser/tailwind-merge-statamic