howdy_ui - v1.0.0

howdy/ui/card

Cards: a raised surface, with optional parts for a header, content and footer.

card.card([], [
  card.header([], [
    card.title([text("Invoices")]),
    card.description([text("Paid in the last 30 days.")]),
    card.action([], [button.button(Ghost, [], [text("Export")])]),
  ]),
  card.content([], [table]),
  card.footer([], [button.button(Primary, [], [text("New invoice")])]),
])

The parts are optional: a card can hold any children.

Types

Size

</>

How much room a card leaves around and between its parts.

pub type Size {
  Default
  Compact
}

Constructors 

  • Default
  • Compact

    Tighter padding and spacing, for dense layouts and lists of cards.

Values

action

</> 
pub fn action(
  attributes: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

Placed at the top right of the header, beside the title and description.

action_class

</> 
pub fn action_class() -> css.Class

card

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

A raised surface with a border and padding.

card_class

</> 
pub fn card_class() -> css.Class

classes

</> 
pub fn classes() -> List(css.Class)

Every class this module uses, for howdy/ui/export.

compact_class

</> 
pub fn compact_class() -> css.Class

content

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

description

</> 
pub fn description(
  children: List(element.Element(msg)),
) -> element.Element(msg)

description_class

</> 
pub fn description_class() -> css.Class
</> 
pub fn footer(
  attributes: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

A row of actions at the bottom of the card.

</> 
pub fn footer_class() -> css.Class
</> 
pub fn header(
  attributes: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

The top of a card: a title, a description and an action beside them.

header_class

</> 
pub fn header_class() -> css.Class

sized

</> 
pub fn sized(
  size: Size,
  attributes: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

A card of the given size. Its header and footer space themselves to match.

title

</> 
pub fn title(
  children: List(element.Element(msg)),
) -> element.Element(msg)

The card’s title. Pass html.h2 or similar inside it when it should be a heading in the document outline.

title_class

</> 
pub fn title_class() -> css.Class
✨ Search Document