View Source BitstylesPhoenix.Component.Card (bitstyles_phoenix v2.5.0)

A Card component.

Summary

Functions

Renders a card component. The card component can have default and large sizes, It accepts a slot for content.

Functions

Renders a card component. The card component can have default and large sizes, It accepts a slot for content.

Default Card

iex> assigns = %{}
...> render ~H"""
...> <.ui_card><p>Hello world</p></.ui_card>
...> """
"""
<article class="a-card">
  <p>
    Hello world
  </p>
</article>
"""

Large Card

iex> assigns = %{}
...> render ~H"""
...> <.ui_card size="l"><p>Hello world</p></.ui_card>
...> """
"""
<article class="a-card a-card-l">
  <p>
    Hello world
  </p>
</article>
"""

Large Card with header

iex> assigns = %{}
...> render ~H"""
...> <.ui_card size="l">
...>  <:card_header variant="danger">Its me mario</:card_header>
...>  <p>Hello world</p>
...> </.ui_card>
...> """
"""
<article class="a-card a-card-l">
  <div aria-live="polite" class="u-padding-l1-y a-flash a-card-l__header" data-theme="danger">
    <div class="a-content u-flex u-items-center u-font-medium">
      Its me mario
    </div>
  </div>
  <p>
    Hello world
  </p>
</article>
"""

Small Card with header

iex> assigns = %{}
...> render ~H"""
...> <.ui_card>
...>  <:card_header variant="danger">Its me mario</:card_header>
...>  <p>Hello world</p>
...> </.ui_card>
...> """
"""
<article class="a-card">
  <div aria-live="polite" class="u-padding-l1-y a-flash a-card__header" data-theme="danger">
    <div class="a-content u-flex u-items-center u-font-medium">
      Its me mario
    </div>
  </div>
  <p>
    Hello world
  </p>
</article>
"""