ZoonkWeb.Components.Card (Zoonk v0.1.0-dev)

Card components.

Summary

Functions

card(assigns)

Renders a card.

card_content(assigns)

Renders a card content.

card_description(assigns)

Renders a card description.

card_header(assigns)

Renders a card header.

card_title(assigns)

Renders a card title.

Functions

card(assigns)

Renders a card.

Examples

<.card>
  <.card_header>
    <.card_title>Card title</.card_title>
    <.card_description>Card description</.card_description>
  </.card_header>

  <.card_content>
    <.text>Card content goes here.</.text>
  </.card_content>
</.card>

Attributes

tag (:string) - The HTML tag to use for the card container. Defaults to "div".
size (:atom) - The size of the card. Can be :auto or :full. Defaults to :full. Must be one of :auto, or :full.
class (:any) - CSS class to apply to the card. Defaults to nil.
Global attributes are accepted. the arbitrary HTML attributes to add to the card container.

Slots

inner_block (required) - the inner block that renders the card content.

card_content(assigns)

Renders a card content.

Examples

<.card_content>
  <.text>Card content goes here.</.text>
</.card_content>

<.card_content align={:top}>
  <.text>This content is aligned to the top.</.text>
</.card_content>

<.card_content align={:center}>
  <.text>This content is centered vertically.</.text>
</.card_content>

<.card_content align={:bottom}>
  <.text>This content is aligned to the bottom.</.text>
</.card_content>

Attributes

tag (:string) - The HTML tag to use for the card content. Defaults to "div".
align (:atom) - The alignment of the content within the card. Can be :top, :center, or :bottom. Defaults to :top. Must be one of :top, :center, or :bottom.
class (:any) - CSS class to apply to the card content. Defaults to nil.
Global attributes are accepted. the arbitrary HTML attributes to add to the card content.

Slots

inner_block (required) - the inner block that renders the card content.

card_description(assigns)

Renders a card description.

Examples

<.card_description>Card description</.card_description>

Attributes

tag (:string) - The HTML tag to use for the card header. Defaults to "div".
class (:any) - CSS class to apply to the card header. Defaults to nil.
Global attributes are accepted. the arbitrary HTML attributes to add to the card header.

Slots

inner_block (required) - the inner block that renders the card header.

card_header(assigns)

Renders a card header.

Examples

<.card_header>
  <.card_title>Card title</.card_title>
  <.card_description>Card description</.card_description>
</.card_header>

Attributes

icon (:string) - The icon to use for the card header. Defaults to nil.
class (:any) - CSS class to apply to the card header. Defaults to nil.
Global attributes are accepted. the arbitrary HTML attributes to add to the card header.

Slots

inner_block (required) - the inner block that renders the card header.

card_title(assigns)

Renders a card title.

Examples

<.card_title>Card title</.card_title>

Attributes

tag (:string) - The HTML tag to use for the card header. Defaults to "div".
class (:any) - CSS class to apply to the card header. Defaults to nil.
Global attributes are accepted. the arbitrary HTML attributes to add to the card header.

Slots

inner_block (required) - the inner block that renders the card header.