View Source Shino.UI.Card (shino v0.1.1-alpha.0)

Provides card related components.

Displays a card with optional header, content, and footer.

Examples

<Card.root>
  <Card.header>
    <Card.title>Orders</Card.title>
    <Card.description>Recent orders from your store.</Card.description>
  </Card.header>
  <Card.content>
    <% # the list of orders %>
  </Card.content>
  <Card.footer>
    <% # more controls %>
  </Card.footer>
</Card.root>

If you only wanna a card skeleton, use Card.root/1 without header, content and footer:

<Card.root>
  <% # the list of orders, and customize the style as you need %>
</Card.root>

References

Summary

Functions

Renders a card content.

Renders a card description.

Renders a card footer.

Renders a card header.

The root contains all the parts of a card.

Renders a card title.

Functions

Renders a card content.

Attributes

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

Slots

  • inner_block (required)

Renders a card description.

Attributes

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

Slots

  • inner_block (required)

Renders a card footer.

Attributes

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

Slots

  • inner_block (required)

Renders a card header.

Attributes

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

Slots

  • inner_block (required)

The root contains all the parts of a card.

Attributes

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

Slots

  • inner_block (required)

Renders a card title.

Attributes

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

Slots

  • inner_block (required)