glaze_oat/card

Oat documentation: https://oat.ink/components/card/

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

Anatomy

A card is typically an outer container with optional header, content, and footer regions. You can use only the regions you need.

Recipes

A basic card

import glaze_oat/card
import lustre/element/html

fn profile_card() {
  card.card([], [
    card.header([], [html.h3([], [html.text("Profile")])]),
    card.content([], [html.p([], [html.text("Update your details.")])]),
    card.footer([], [html.button([], [html.text("Save")])]),
  ])
}

Content-only card

import glaze_oat/card
import lustre/element/html

fn simple_card() {
  card.card([], [
    card.content([], [html.text("Just content")]),
  ])
}

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 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 instance(
  element: fn(
    List(attribute.Attribute(msg)),
    List(element.Element(msg)),
  ) -> element.Element(msg),
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)