Packages
noora
0.2.0
0.86.0
0.85.0
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
lib/noora/card.ex
defmodule Noora.Card do
@moduledoc """
A card component, used to separate content into sections.
## Example
```elixir
<.card icon="layers" title="Overview">
<.card_section>
<p>Content goes here</p>
</.card_section>
</.card>
```
"""
use Phoenix.Component
import Noora.Icon
import Noora.Utils
attr(:icon, :string, required: true, doc: "The icon to display in the card.")
attr(:title, :string, required: true, doc: "The title of the card.")
attr(:rest, :global)
slot(:actions,
required: false,
doc: "Slots for actions to be displayed in the card. Rendered to the right of the title."
)
slot(:inner_block, required: true)
@doc """
The main card container.
"""
def card(assigns) do
~H"""
<div class="noora-card" {@rest}>
<div data-part="header">
<div data-part="icon-with-title">
<div data-part="icon">
<.icon name={@icon} />
</div>
<span data-part="title">{@title}</span>
</div>
<div :if={has_slot_content?(@actions, assigns)} data-part="actions">
{render_slot(@actions)}
</div>
</div>
{render_slot(@inner_block)}
</div>
"""
end
attr(:class, :string, default: "", doc: "The class to apply to the card section.")
attr(:rest, :global)
slot(:inner_block, required: true)
@doc """
A generic wrapper around a piece of content to be displayed in a card.
Each card can contain multiple content sections.
"""
def card_section(assigns) do
~H"""
<div class={"noora-card__section " <> @class} {@rest}>
{render_slot(@inner_block)}
</div>
"""
end
end