Card

Pick a card, any card. Memorized it? Remember it and put it back in the template.

Includes a Ruby component and corresponding Rails helper

Ruby

The basic Card component comes with a few built-in elements.

I suggest you make it your own. Don't be afraid to make multiple card types and don't tie them too tightly together.

Example

Seal the deal

You've worked for this moment. It's time to make it official.

<%= nk_card(class: "flex-none w-full max-w-[320px]") do |c| %>
  <%= nk_icon "landmark", class: "size-12" %>
  <%= c.title "Seal the deal" %>
  <%= c.body do %>
    You've worked for this moment. It's time to make it official.
  <% end %>
  <%= c.footer(class: "justify-end") do %>
    <%= nk_primary_button "Shake on it", icon: "handshake" %>
  <% end %>
<% end %>

<%= nk_card do |c| %>
  <%= nk_icon "landmark", class: "size-12" %>
  <%= c.title "Seal the deal" %>
  <%= c.body do %>
      You've worked for this moment. It's time to make it official.
  <% end %>
  <%= c.footer(class: "justify-end") do %>
    <%= nk_primary_button "Shake on it", icon: "handshake" %>
  <% end %>
<% end %>

Install

Set up Nitro Kit then

bin/rails generate nitro_kit:add card

Files generated

Advanced example

Here's a slightly more advanced example.

Top-Mounted Jet Engines

Tired of being stuck in traffic? See what we have in stock. Best prices in the market.

New!

<%= nk_card(class: "flex-none w-full max-w-[480px]") do |c| %>
  <%= c.full_width { image_tag "/og.png" } %>
  <%= c.title do %>
    <%= link_to "Top-Mounted Jet Engines", "", class: "hover:underline" %>
  <% end %>
  <%= c.body do %>
    Tired of being stuck in traffic? See what we have in stock. Best prices in the market.
  <% end %>
  <%= c.divider %>
  <%= c.footer(class: "") do %>
    <%= nk_badge "New!", class: "border border-yellow-500/60 dark:border-yellow-500/30 bg-yellow-400/20 text-yellow-700 dark:bg-yellow-400/10 dark:text-yellow-300 " %>
    <div class="flex items-center">
      <%= nk_ghost_button_to nil, class: "text-muted-foreground hover:text-foreground", icon: "sparkles", size: :sm %>
      <%= nk_ghost_button_to nil, class: "text-muted-foreground hover:text-foreground", icon: "citrus", size: :sm %>
    </div>
    <div class="flex-1"></div>
    <%= nk_button "Let's go", size: :sm, icon_right: "arrow-right", class: "sm:hidden" %>
    <%= nk_button "Let's go", icon_right: "arrow-right", class: "hidden sm:inline-flex" %>
  <% end %>
<% end %>

Usage

`nk_card(**attrs) { \|card\| ... }`
Property	Default	Description
`**attrs`		HTML attributes for `<div>` element

`card.title(text = nil, **attrs) { ... }`
Property	Default	Description
`text`	`nil`	Plain text content
`**attrs`		HTML attributes for `<h2>` element

`card.body(text = nil, **attrs) { ... }`
Property	Default	Description
`text`	`nil`	Plain text content
`**attrs`		HTML attributes for `<div>` element

`card.footer(text = nil, **attrs) { ... }`
Property	Default	Description
`text`	`nil`	Plain text content
`**attrs`		HTML attributes for `<div>` element

`card.divider(**attrs) { ... }`
Property	Default	Description
`**attrs`		HTML attributes for `<hr>` element

`card.full_width(**attrs) { ... }`
Property	Default	Description
`**attrs`		HTML attributes for `<div>` element