LiveUiKit.UI.Card (LiveUIKit v0.1.3)

Cards are used to group and display content in a way that is easily readable.

Link to this section Summary

Functions

Card component. A card component can contain card_body, card_header, card_footer.

Card body component.

Card footer component.

Card header component.

Card title component.

Link to this section Functions

Card component. A card component can contain card_body, card_header, card_footer.

examples

Examples

<.card>
  <.card_body>
    Basic card with body
  </.card_body>
</.card>

 <.card_body>
    <.card_title>
      Card Title
    </.card_title>
    Some quick example text to build on the card title and make up the bulk of the card's content.
  </.card_body>
</.card>

<.card>
  <.card_body title="Card Title">
    Some quick example text to build on the card title and make up the bulk of the card's content.
  </.card_body>
</.card>

<.card>
  <a href="#!">
    <img class="rounded-t-lg" src="https://mdbootstrap.com/img/new/standard/nature/184.jpg" alt=""/>
  </a>
  <.card_body>
    <h5 class="mb-2 text-xl font-medium text-gray-900">Card Title</h5>
    <p class="mb-4 text-base text-gray-700">
      Some quick example text to build on the card title and make up the bulk of the card's
      content.
    </p>
  </.card_body>
</.card>

<.card header="Header Text">
  <.card_body>
    Card with header and body
  </.card_body>
</.card>

<.card footer="Footer text">
  <.card_body>
    Card with header and body
  </.card_body>
</.card>

options

Options

  • header - Passing in a header text will act as a <.card_header>.
  • footer - Passing in a footer text will act as a <.card_footer>.
  • extended_class - The class or classes that will be appended to the default class attribute.

All further assigns will be passed to the card tag.

Link to this function

card_body(assigns)

Card body component.

options

Options

  • title - Passing in a title text will act as a <.card_title>.
  • extended_class - The class or classes that will be appended to the default class attribute.

All further assigns will be passed to the card body tag.

Link to this function

card_footer(assigns)

Card footer component.

options

Options

  • extended_class - The class or classes that will be appended to the default class attribute.

All further assigns will be passed to the card footer tag.

Link to this function

card_header(assigns)

Card header component.

options

Options

  • extended_class - The class or classes that will be appended to the default class attribute.

All further assigns will be passed to the card header tag.

Link to this function

card_title(assigns)

Card title component.

options

Options

  • extended_class - The class or classes that will be appended to the default class attribute.

All further assigns will be passed to the card title tag.