View Source BitstylesPhoenix.Component.Card (bitstyles_phoenix v2.3.1)
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-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>
"""