View Source LiveViewUI.UI.Card (LiveViewUI v0.0.7)

A simple card component for displaying content within a bordered and rounded container.

Example Usage

Here is a basic example of setting up a card component:

<Card.root>
  <Card.header>
    <Card.title>
      Card Title
    </Card.title>
    <Card.description>
      This is a description of the card.
    </Card.description>
  </Card.header>
  <Card.content>
    <p>Card content goes here.</p>
  </Card.content>
  <Card.footer>
    <Button.root>Footer Button</Button.root>
  </Card.footer>
</Card.root>

Components

  • LiveViewUI.UI.Card.root - The main container for the card.
  • LiveViewUI.UI.Card.header - The header section of the card.
  • LiveViewUI.UI.Card.title - The title element within the card header.
  • LiveViewUI.UI.Card.description - The description element within the card header.
  • LiveViewUI.UI.Card.content - The content section of the card.
  • LiveViewUI.UI.Card.footer - The footer section of the card.

Attributes

LiveViewUI.UI.Card.root

  • :class - Additional CSS classes to apply to the card.
  • :rest - Any additional attributes to apply to the card's root element.

LiveViewUI.UI.Card.header

  • :class - Additional CSS classes to apply to the header.
  • :rest - Any additional attributes to apply to the header's root element.

LiveViewUI.UI.Card.title

  • :class - Additional CSS classes to apply to the title.
  • :rest - Any additional attributes to apply to the title's root element.

LiveViewUI.UI.Card.description

  • :class - Additional CSS classes to apply to the description.
  • :rest - Any additional attributes to apply to the description's root element.

LiveViewUI.UI.Card.content

  • :no_header - A boolean to specify if the content should have padding at the top. Default is false.
  • :class - Additional CSS classes to apply to the content.
  • :rest - Any additional attributes to apply to the content's root element.
  • :class - Additional CSS classes to apply to the footer.
  • :rest - Any additional attributes to apply to the footer's root element.

Slots

  • :inner_block - The content to be displayed inside each section of the card.

Summary

Functions

Attributes

  • no_header (:boolean) - Defaults to false.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

Attributes

  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

Attributes

  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

Attributes

  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

Attributes

  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

Attributes

  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

Functions

Attributes

  • no_header (:boolean) - Defaults to false.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

Attributes

  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

Attributes

  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

Attributes

  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

Attributes

  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

Attributes

  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)