Documentation Playground
Skip to content
Docs

Card

Container that groups related content and actions.
T
Teodros Girmay
Engineering 
<.box max_width="240px">
  <.card>
    <.flex gap="3" align="center">
      <.avatar
        size="3"
        src="https://images.unsplash.com/photo-1607346256330-dee7af15f7c5?&w=64&h=64&dpr=2&q=70&crop=focalpoint&fp-x=0.67&fp-y=0.5&fp-z=1.4&fit=crop"
        radius="full"
        fallback="T"
      />
      <.box>
        <.text as="div" size="2" weight="bold">Teodros Girmay</.text>
        <.text as="div" size="2" color="gray">Engineering</.text>
      </.box>
    </.flex>
  </.card>
</.box>

API Reference

This component is based on the div element and supports common margin props.

Prop Type Default Description
as_child boolean false Composes the component into its immediate child instead of rendering its own HTML element.
class string nil Additional CSS classes to add to the element.
m any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mb any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
ml any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mr any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mt any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mx any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
my any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
size string "1" Card size from 1 to 5. Controls padding and border radius.
style string ""
variant string "surface" Visual style variant. One of 'surface', 'classic', or 'ghost'.
as_child Composes the component into its immediate child instead of rendering its own HTML element.
Type boolean Default false
class Additional CSS classes to add to the element.
Type string Default nil
m Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mb Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
ml Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mr Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mt Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mx Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
my Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
size Card size from 1 to 5. Controls padding and border radius.
Type string Default "1"
style
Type string Default ""
variant Visual style variant. One of 'surface', 'classic', or 'ghost'.
Type string Default "surface"

Examples

As another element

Nest a link (or button) inside the card for interactive surfaces. Prefer this pattern until as_child composition merges props into the child element.

Quick start
Start building your next project in minutes 
<.box max_width="350px">
  <.card>
    <a href="#" style="text-decoration: none; color: inherit; display: block;">
      <.text as="div" size="2" weight="bold">Quick start</.text>
      <.text as="div" color="gray" size="2">Start building your next project in minutes</.text>
    </a>
  </.card>
</.box>

Size

Use the size prop to control the size.

T
Teodros Girmay
Engineering
T
Teodros Girmay
Engineering
T
Teodros Girmay
Engineering 
<.flex gap="3" direction="column">
  <.box width="350px">
    <.card size="1">
      <.flex gap="3" align="center">
        <.avatar size="3" radius="full" fallback="T" color="indigo" />
        <.box>
          <.text as="div" size="2" weight="bold">Teodros Girmay</.text>
          <.text as="div" size="2" color="gray">Engineering</.text>
        </.box>
      </.flex>
    </.card>
  </.box>
  <.box width="400px">
    <.card size="2">
      <.flex gap="4" align="center">
        <.avatar size="4" radius="full" fallback="T" color="indigo" />
        <.box>
          <.text as="div" weight="bold">Teodros Girmay</.text>
          <.text as="div" color="gray">Engineering</.text>
        </.box>
      </.flex>
    </.card>
  </.box>
  <.box width="500px">
    <.card size="3">
      <.flex gap="4" align="center">
        <.avatar size="5" radius="full" fallback="T" color="indigo" />
        <.box>
          <.text as="div" size="4" weight="bold">Teodros Girmay</.text>
          <.text as="div" size="4" color="gray">Engineering</.text>
        </.box>
      </.flex>
    </.card>
  </.box>
</.flex>

Variant

Use the variant prop to control the visual style.

Quick start
Start building your next project in minutes
Quick start
Start building your next project in minutes 
<.flex direction="column" gap="3" max_width="350px">
  <.card variant="surface">
    <.text as="div" size="2" weight="bold">Quick start</.text>
    <.text as="div" color="gray" size="2">Start building your next project in minutes</.text>
  </.card>
  <.card variant="classic">
    <.text as="div" size="2" weight="bold">Quick start</.text>
    <.text as="div" color="gray" size="2">Start building your next project in minutes</.text>
  </.card>
</.flex>

With inset content

Use the <.inset> utility to align content flush with the sides of the card.

Bold typography

Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed. 

<.box max_width="240px">
  <.card size="2">
    <.inset side="top" clip="padding-box">
      <img
        src="https://images.unsplash.com/photo-1617050318658-a9a3175e34cb?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80"
        alt="Bold typography"
        style="display: block; object-fit: cover; width: 100%; height: 140px; background-color: var(--gray-5);"
      />
    </.inset>
    <.box mt="3">
      <.text as="p" size="3">
        <.strong>Typography</.strong>
        is the art and technique of arranging type to make written language legible, readable and appealing when displayed.
      </.text>
    </.box>
  </.card>
</.box>
← Callout Checkbox →