glaze/basecoat/card

Basecoat documentation: https://basecoatui.com/components/card/

The card helpers compose grouped content blocks such as summaries, settings sections, and dashboard tiles.

Anatomy

A card typically includes a header (with title and description), content section, and optional footer for actions.

Recipes

Simple card

import glaze/basecoat/card
import lustre/element/html

fn simple_card() {
  card.card([], [
    card.header([], [
      card.title([], [html.text("Card Title")]),
      card.description([], [html.text("Card description")]),
    ]),
    card.content([], [html.text("Content goes here")]),
    card.footer([], [html.text("Footer")]),
  ])
}

pub fn card(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

pub fn content(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

pub fn description(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

pub fn footer(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

pub fn header(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

pub fn no_padding() -> attribute.Attribute(msg)

pub fn title(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)