Card

Uma superfície com borda para agrupar conteúdo relacionado.

Instalação

O Shadwire segue o modelo open-code do shadcn/ui: o código-fonte do componente é copiado para a sua aplicação e passa a ser seu. Instale com a CLI:

shadwire add card --yes

O item card do registry instala estes arquivos:

app/components/ui_component.rb
app/components/ui/card_component.rb
app/components/ui/card/header_component.rb
app/components/ui/card/title_component.rb
app/components/ui/card/description_component.rb
app/components/ui/card/content_component.rb
app/components/ui/card/footer_component.rb
app/helpers/ui/card_helper.rb
vendor/shadwire/shadwire.css

Ainda não instalou a CLI? gem install shadwire e depois shadwire init.

Uso

<%= ui_card do %>
  <%= ui_card_header do %>
    <%= ui_card_title { "Criar projeto" } %>
    <%= ui_card_description { "Configure o novo workspace." } %>
  <% end %>
  <%= ui_card_content { "Conteúdo do card." } %>
<% end %>

Ou renderize os componentes diretamente:

<%= render Ui::CardComponent.new do %>
  <%= render Ui::Card::HeaderComponent.new do %>
    <%= render Ui::Card::TitleComponent.new do %>
      Criar projeto
    <% end %>
  <% end %>
<% end %>

Composição

Card
|-- Card::Header
|   |-- Card::Title
|   `-- Card::Description
|-- Card::Content
`-- Card::Footer

Exemplos

Padrão

Componha header, title, description, content e footer dentro do card.

Criar projeto

Configure nome, visibilidade e membros iniciais.

Use cards para agrupar conteúdo e ações relacionadas.

<%= ui_card(class: "max-w-sm", data: { slot: "card" }) do %>
  <%= ui_card_header(data: { slot: "card-header" }) do %>
    <%= ui_card_title(data: { slot: "card-title" }) { "Criar projeto" } %>
    <%= ui_card_description(data: { slot: "card-description" }) do %>
      Configure nome, visibilidade e membros iniciais.
    <% end %>
  <% end %>
  <%= ui_card_content(data: { slot: "card-content" }) do %>

<%= ui_card(class: "max-w-sm", data: { slot: "card" }) do %>
  <%= ui_card_header(data: { slot: "card-header" }) do %>
    <%= ui_card_title(data: { slot: "card-title" }) { "Criar projeto" } %>
    <%= ui_card_description(data: { slot: "card-description" }) do %>
      Configure nome, visibilidade e membros iniciais.
    <% end %>
  <% end %>
  <%= ui_card_content(data: { slot: "card-content" }) do %>
    <p class="text-sm text-muted-foreground">Use cards para agrupar conteúdo e ações relacionadas.</p>
  <% end %>
  <%= ui_card_footer(class: "justify-end gap-2", data: { slot: "card-footer" }) do %>
    <%= ui_button(variant: :outline, size: :sm) { "Cancelar" } %>
    <%= ui_button(size: :sm) { "Criar" } %>
  <% end %>
<% end %>

Referência da API

Helpers disponíveis: ui_card, ui_card_header, ui_card_title, ui_card_description, ui_card_content e ui_card_footer.

API	Elemento	Descrição
`ui_card`	`div`	Container com borda, superfície card e sombra.
`ui_card_header`	`div`	Área superior com espaçamento vertical.
`ui_card_title`	`h3`	Título; aceita `tag_name:`.
`ui_card_description`	`p`	Texto auxiliar em muted foreground.
`ui_card_content`	`div`	Conteúdo principal.
`ui_card_footer`	`div`	Ações ou metadados inferiores.