BitstylesPhoenix.Component.Card.ui_card

You're seeing just the function ui_card, go back to BitstylesPhoenix.Component.Card module for more information.

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-l-y a-flash a-flash--danger a-card-l__header">
    <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-l-y a-flash a-flash--danger a-card__header">
    <div class="a-content u-flex u-items-center u-font-medium">
      Its me mario
    </div>
  </div>
  <p>
    Hello world
  </p>
</article>
"""