Card

The surface most of the library’s examples sit on. Its parts are optional and in any order the host renders them: a header with a title, a description and an action, then content, then a footer.

Header, content and footer

A card sits on --hui-card, not --hui-background. In the dark theme those differ, which matters for anything drawing a ring or a seam against it — see the note on .hui-avatar-group.

.hui-card

A card whose edge is a ring, not a border, so it never reflows its contents. It spaces its parts 16px apart, as nova does.

<div class="hui-card">
  <div class="hui-card__header">
    <h3 class="hui-card__title">…</h3>
    <p class="hui-card__description">…</p>
    <div class="hui-card__action">…</div>
  </div>
  <div class="hui-card__content">…</div>
  <div class="hui-card__footer">…</div>
</div>

.hui-card__action

A control beside the title and description, such as a close button or a small outline button.

.hui-card__content

The card body.

.hui-card__description

Muted supporting text under the title.

.hui-card__footer

The card footer: a tinted band with a rule above it that closes the card, laying actions in a row.

.hui-card__header

The card’s top block; stacks title and description, with an optional action beside them.

.hui-card__title

The card title, in the heading face.