Card

<oblyx-card> is a bordered container for a self-contained chunk of content. Pair it with <oblyx-card-header>, <oblyx-card-body> and <oblyx-card-footer> when the content has that shape, or leave it bare for anything simpler. Card is a flat vertical stack; if you need a two-dimensional layout with side panels or independently scrolling regions, that's Layout, not Card.

Basic card

Team plan

Unlimited projects, up to 20 members, shared billing.

Upgrade

HTML

Kotlin

<oblyx-card>
  <oblyx-card-header>Team plan</oblyx-card-header>
  <oblyx-card-body>Unlimited projects, up to 20 members, shared billing.</oblyx-card-body>
  <oblyx-card-footer>
    <oblyx-button variant="primary">Upgrade</oblyx-button>
  </oblyx-card-footer>
</oblyx-card>

oblyxCard {
  oblyxCardHeader { +"Team plan" }
  oblyxCardBody { +"Unlimited projects, up to 20 members, shared billing." }
  oblyxCardFooter {
    oblyxButton(variant = OblyxButtonVariant.PRIMARY) { +"Upgrade" }
  }
}

Composition

oblyx-card-header, oblyx-card-body and oblyx-card-footer are plain child elements, not slots. Oblyx is a light DOM library: there's no <slot>, no shadow root, and no JavaScript running on <oblyx-card> that inspects or coordinates with its children. The card is a column flexbox in CSS, and its header/body/footer children are its flex items in DOM order. That's the entire composition mechanism: any subset of the three, in any order, just works, because CSS is arranging whatever happens to be there rather than a script walking the DOM looking for named slots.

A card with no structured children at all is also valid. It keeps its own padding; once any header, body or footer is present, padding shifts to each of those instead, so the parts don't end up double-padded against each other.

Card with no structure

Renewal due in 12 days.

HTML

Kotlin

<oblyx-card>Renewal due in 12 days.</oblyx-card>

oblyxCard { +"Renewal due in 12 days." }

Body only

Any subset of header/body/footer is valid, in any order.

No header, no footer. Just a body region.

HTML

Kotlin

<oblyx-card>
  <oblyx-card-body>No header, no footer. Just a body region.</oblyx-card-body>
</oblyx-card>

oblyxCard {
  oblyxCardBody { +"No header, no footer. Just a body region." }
}

Variants

default is the only variant with a visible border. Every other variant is a borderless background tint, useful for a card that should read as a lighter-weight grouping than the bordered default.

Card variants

Default

Muted

Blue

Transparent

HTML

Kotlin

<oblyx-card variant="default">Default</oblyx-card>
<oblyx-card variant="muted">Muted</oblyx-card>
<oblyx-card variant="blue">Blue</oblyx-card>
<oblyx-card variant="transparent">Transparent</oblyx-card>

oblyxCard(variant = OblyxCardVariant.DEFAULT) { +"Default" }
oblyxCard(variant = OblyxCardVariant.MUTED) { +"Muted" }
oblyxCard(variant = OblyxCardVariant.BLUE) { +"Blue" }
oblyxCard(variant = OblyxCardVariant.TRANSPARENT) { +"Transparent" }

Elevation

A resting shadow depth, same scale as button and other elevated surfaces. Defaults to none, appropriate for a card sitting in normal document flow.

Card elevation

None

Low

Med

High

HTML

Kotlin

<oblyx-card elevation="none">None</oblyx-card>
<oblyx-card elevation="low">Low</oblyx-card>
<oblyx-card elevation="med">Med</oblyx-card>
<oblyx-card elevation="high">High</oblyx-card>

oblyxCard(elevation = OblyxCardElevation.NONE) { +"None" }
oblyxCard(elevation = OblyxCardElevation.LOW) { +"Low" }
oblyxCard(elevation = OblyxCardElevation.MED) { +"Med" }
oblyxCard(elevation = OblyxCardElevation.HIGH) { +"High" }

Filling available height

oblyx-card-body is the one region built to absorb extra space: it carries flex: 1 1 auto directly on the element, so when a card is stretched to a fixed or flex-assigned height, the header and footer stay their natural content size and the body grows or shrinks to take up what's left. Give the body its own overflow-y if that growing region should scroll internally rather than push the card taller than its container.

Card body absorbs extra height

The outer div fixes the available height at 220px and stretches the card to fill it. The header and footer keep their content size, and the body scrolls.

Activity log

Line 1 of a long scrolling body.

Line 2 of a long scrolling body.

Line 3 of a long scrolling body.

Line 4 of a long scrolling body.

Line 5 of a long scrolling body.

Line 6 of a long scrolling body.

6 events

HTML

Kotlin

<div style="display: flex; height: 220px;">
  <oblyx-card style="display: flex; flex: 1 1 auto;">
    <oblyx-card-header>Activity log</oblyx-card-header>
    <oblyx-card-body style="overflow-y: auto;">
      <p>Line 1 of a long scrolling body.</p>
      <p>Line 2 of a long scrolling body.</p>
      <p>Line 3 of a long scrolling body.</p>
      <p>Line 4 of a long scrolling body.</p>
      <p>Line 5 of a long scrolling body.</p>
      <p>Line 6 of a long scrolling body.</p>
    </oblyx-card-body>
    <oblyx-card-footer>6 events</oblyx-card-footer>
  </oblyx-card>
</div>

div {
  style = "display: flex; height: 220px;"
  oblyxCard {
    style = "display: flex; flex: 1 1 auto;"
    oblyxCardHeader { +"Activity log" }
    oblyxCardBody {
      style = "overflow-y: auto;"
      p { +"Line 1 of a long scrolling body." }
      p { +"Line 2 of a long scrolling body." }
      p { +"Line 3 of a long scrolling body." }
      p { +"Line 4 of a long scrolling body." }
      p { +"Line 5 of a long scrolling body." }
      p { +"Line 6 of a long scrolling body." }
    }
    oblyxCardFooter { +"6 events" }
  }
}

Reference

`<oblyx-card>`

Attribute	Type	Default	Description
`variant`	`defaulttransparentmutedbluecyangraygreenorangepinkpurpleredtealyellow`	`default`	Background/border treatment. Defaults to `default`, the only variant with a visible border.
`elevation`	`nonelowmedhigh`	`none`	Shadow depth. Defaults to `none`, matching upstream.

`<oblyx-card-header>`

This element declares no attributes.

`<oblyx-card-body>`

This element declares no attributes.

`<oblyx-card-footer>`

This element declares no attributes.