Card

A surface for related content.

Default

Website redesign

Design system · Updated today

<div class="<%= card_class %>">
  <p class="font-semibold">Website redesign</p>
  <p class="text-sm text-ink-3">Design system · Updated today</p>
</div>

Dense

Website redesign

Design system · Updated today

<div class="<%= card_class(dense: true) %>">
  <p class="font-semibold">Website redesign</p>
  <p class="text-sm text-ink-3">Design system · Updated today</p>
</div>

Interactive

Website redesign

Design system · Updated today

<div class="<%= card_class(interactive: true) %>">
  <p class="font-semibold">Website redesign</p>
  <p class="text-sm text-ink-3">Design system · Updated today</p>
</div>

Surface

Website redesign

Design system · Updated today

<div class="<%= card_surface_class(extra: "p-5") %>">
  <p class="font-semibold">Website redesign</p>
  <p class="text-sm text-ink-3">Design system · Updated today</p>
</div>

Default

Website redesign

Design system · Updated today

<div class="<%= form_card_class(padding: :default) %>">
  <p class="font-semibold">Website redesign</p>
  <p class="text-sm text-ink-3">Design system · Updated today</p>
</div>

Compact

Website redesign

Design system · Updated today

<div class="<%= form_card_class(padding: :compact) %>">
  <p class="font-semibold">Website redesign</p>
  <p class="text-sm text-ink-3">Design system · Updated today</p>
</div>

Snug

Website redesign

Design system · Updated today

<div class="<%= form_card_class(padding: :snug) %>">
  <p class="font-semibold">Website redesign</p>
  <p class="text-sm text-ink-3">Design system · Updated today</p>
</div>

Empty

Website redesign

Design system · Updated today

<div class="<%= form_card_class(padding: :empty) %>">
  <p class="font-semibold">Website redesign</p>
  <p class="text-sm text-ink-3">Design system · Updated today</p>
</div>

API reference

card_class

card_class(interactive: false, dense: false, extra: nil)

Parameter	Default	Values
interactive	false	true · false
dense	false	true · false
extra	nil	Additional Tailwind classes

card_surface_class

card_surface_class(extra: nil)

Parameter	Default	Values
extra	nil	Additional Tailwind classes

form_card_class

form_card_class(padding: :default, extra: nil)

Parameter	Default	Values
padding	:default	:default · :compact · :snug · :empty
extra	nil	Additional Tailwind classes