Catalog Cards

<.group_header>

ConnieUI.Cards

Active

Feature Film — "Northern Lights"
Carlsberg — Summer Campaign

Archived

Documentary — "The Sound"
HEEx 
<div class="w-5xl">
  <ConnieUI.Cards.card_grid id="catalog-grouped-grid">
    <ConnieUI.Cards.group_header id="catalog-group-active">
      <ConnieUI.Typography.heading level="h3">Active</ConnieUI.Typography.heading>
    </ConnieUI.Cards.group_header>
    <ConnieUI.Cards.card :for={project <- Enum.take(@projects, 2)}>
      <ConnieUI.Cards.content>{project.name}</ConnieUI.Cards.content>
    </ConnieUI.Cards.card>
    <ConnieUI.Cards.group_header id="catalog-group-archived">
      <ConnieUI.Typography.heading level="h3">Archived</ConnieUI.Typography.heading>
    </ConnieUI.Cards.group_header>
    <ConnieUI.Cards.card :for={project <- Enum.drop(@projects, 2)}>
      <ConnieUI.Cards.content>{project.name}</ConnieUI.Cards.content>
    </ConnieUI.Cards.card>
  </ConnieUI.Cards.card_grid>
</div>

Controls

:string

Set by the example

class

Docs

A group's heading among the cards of a `card_grid/1`, on a line of its own: the grid's counterpart of a table's `:group` row, for a `ConnieUI.Pagination.Group` marker in a grouped stream. The caller places it in the grid's block in front of the group's cards, and supplies the heading. <ConnieUI.Cards.card_grid id="projects-grid" stream> <%= for {dom_id, entry} <- entries do %> <%= if ConnieUI.Pagination.group?(entry) do %> <ConnieUI.Cards.group_header id={dom_id}>...</ConnieUI.Cards.group_header> <% else %> <.project_card id={dom_id} project={entry} /> <% end %> <% end %> </ConnieUI.Cards.card_grid>
Attribute Type Default Description
id :string nil
class :any nil
Slot Slot attributes Description
inner_block *