Chevron left
RailsUI

Components

Cards

Theme

Themes/hound/logo.svg

Hound

Framework

Tailwind CSS logo

Tailwind CSS

Quicklinks

Quickly navigate to different cards patterns below

Cards include options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

Cards

Base

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

<div class="rounded-lg shadow-lg shadow-slate-300/70 bg-white p-6 dark:bg-slate-800 dark:shadow-slate-900/50 dark:text-white">
  <h4>Card title</h4>
  <p class="py-2">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class="rounded-lg shadow-lg shadow-slate-300/70 bg-white p-6 dark:bg-slate-800 dark:shadow-slate-900/50 dark:text-white">
  <h4>Card title</h4>
  <p class="py-2">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
.rounded-lg.shadow-lg.bg-white.p-6.dark:bg-slate-800.dark:text-white{class: "shadow-slate-300/70 dark:shadow-slate-900/50"}
  %h4 Card title
  %p.py-2 Some quick example text to build on the card title and make up the bulk of the card's content.

Cards

With header

Job postings

Lorem ipsum dolor sit amet, consectetur adipisicin.

<div class="rounded-lg shadow-lg shadow-slate-300/70 bg-white p-6 dark:bg-slate-800 dark:text-white dark:shadow-slate-900/50">
  <div class="-mx-6 border-b border-slate-200 dark:border-slate-700 px-6 pb-4 mb-4">
    <h3 class="sm:text-2xl text-xl">Job postings</h3>
    <p class="text-slate-500 dark:text-slate-300">Lorem ipsum dolor sit amet, consectetur adipisicin.</p>
  </div>
  <!-- content -->
</div>
.rounded-lg.shadow-lg.bg-white.p-6.dark:bg-slate-800.dark:text-white{class: "shadow-slate-300/70 dark:shadow-slate-900/50"}
  .-mx-6.border-b.border-slate-200.dark:border-slate-700.px-6.pb-4.mb-4
    %h3.sm:text-2xl.text-xl Job postings
    %p.text-slate-500.dark:text-slate-300 Lorem ipsum dolor sit amet, consectetur adipisicin.
  / content

Cards

With action

Posts

New post 
<div class="rounded-lg shadow-lg shadow-slate-300/70 bg-white p-6 dark:bg-slate-800 dark:shadow-slate-900/50">
  <div class="-mx-6 border-b border-slate-200 dark:border-slate-700 px-6 pb-4 mb-4 flex items-center justify-between flex-wrap">
    <h1 class="sm:text-2xl text-xl">Posts</h1>
    <a href="#" class="btn btn-primary">New post</a>
    </div>
  <!-- content -->
</div>
<div class="rounded-lg shadow-lg shadow-slate-300/70 bg-white p-6 dark:bg-slate-800 dark:shadow-slate-900/50">
  <div class="-mx-6 border-b border-slate-200 dark:border-slate-700 px-6 pb-4 mb-4 flex items-center justify-between flex-wrap">
    <h1 class="sm:text-2xl text-xl">Posts</h1>
    <a class="btn btn-primary" href="#">New post</a>
  </div>
  <!-- content -->
</div>
.rounded-lg.shadow-lg.bg-white.p-6.dark:bg-slate-800{class: "shadow-slate-300/70 dark:shadow-slate-900/50"}
  .-mx-6.border-b.border-slate-200.dark:border-slate-700.px-6.pb-4.mb-4.flex.items-center.justify-between.flex-wrap
    %h1.sm:text-2xl.text-xl Posts
    = link_to "New post", "#", class: "btn btn-primary"
  / content

Cards

User card

John Doe

john.doe@example.com

+1-555-555-5555

<div class="rounded-lg shadow-lg shadow-slate-300/70 bg-white py-4 px-6 flex items-center space-x-4 w-auto dark:bg-slate-800 dark:shadow-slate-900/50 dark:text-white">
<img class="object-cover w-16 h-16 rounded-full flex-shrink-0" src="https://source.unsplash.com/random/200x200/?male portrait&orientation=landscape" />
<div class="flex-1 flex flex-col items-start space-y-px text-slate-700">
  <p class="font-bold dark:text-white">John Doe</p>
    <div class="flex items-center space-x-3 pb-1">
      <%= icon "envelope", classes: "w-5 h-5 text-indigo-500 dark:text-indigo-400" %>
      <p class="text-sm dark:text-slate-300">john.doe@example.com</p>
    </div>
    <div class="flex items-center space-x-3 text-primary-400">
      <%= icon "phone", classes: "w-5 h-5 text-indigo-500 dark:text-indigo-400" %>
      <p class="text-sm dark:text-slate-300">+1-555-555-5555</p>
    </div>
  </div>
</div>
<div class="rounded-lg shadow-lg shadow-slate-300/70 bg-white py-4 px-6 flex items-center space-x-4 w-auto dark:bg-slate-800 dark:shadow-slate-900/50 dark:text-white">
<%= image_tag "#", class: "object-cover w-16 h-16 rounded-full flex-shrink-0" %>
<div class="flex-1 flex flex-col items-start space-y-px text-slate-700">
  <p class="font-bold dark:text-white">John Doe</p>
    <div class="flex items-center space-x-3 pb-1">
      <%= icon "envelope", classes: "w-5 h-5 text-indigo-500 dark:text-indigo-400" %>
      <p class="text-sm dark:text-slate-300">john.doe@example.com</p>
    </div>
    <div class="flex items-center space-x-3 text-primary-400">
      <%= icon "phone", classes: "w-5 h-5 text-indigo-500 dark:text-indigo-400" %>
      <p class="text-sm dark:text-slate-300">+1-555-555-5555</p>
    </div>
  </div>
</div>
.rounded-lg.shadow-lg.bg-white.py-4.px-6.flex.items-center.space-x-4.w-auto.dark:bg-slate-800.dark:text-white{class: "shadow-slate-300/70 dark:shadow-slate-900/50"}
  = image_tag "#", class: "object-cover w-16 h-16 rounded-full flex-shrink-0"
  .flex-1.flex.flex-col.items-start.space-y-px.text-slate-700
    %p.font-bold.dark:text-white John Doe
    .flex.items-center.space-x-3.pb-1
      = icon "envelope", classes: "w-5 h-5 text-indigo-500 dark:text-indigo-400"
      %p.text-sm.dark:text-slate-300 john.doe@example.com
    .flex.items-center.space-x-3.text-primary-400
      = icon "phone", classes: "w-5 h-5 text-indigo-500 dark:text-indigo-400"
      %p.text-sm.dark:text-slate-300 +1-555-555-5555

Cards

User card with actions

John Doe

Software Architect at Amazon

Phone Email 
<div class="rounded-lg shadow-lg shadow-slate-300/70 bg-white py-4 px-6 flex flex-wrap items-center w-auto dark:bg-slate-800 dark:shadow-slate-900/50 dark:text-white">
  <img class="object-cover w-16 h-16 rounded-full flex-shrink-0" src="https://source.unsplash.com/random/200x200/?male portrait&orientation=landscape" />
  <div class="pl-3 flex-1 flex flex-col items-start space-y-px text-slate-700">
    <p class="font-bold dark:text-white">John Doe</p>
    <p class="text-sm dark:text-slate-300">Software Architect at <a href="#" class="btn-link">Amazon</a></p>
  </div>
  <div class="grid gap-3 grid-cols-2 lg:pt-0 pt-3 w-full lg:w-auto">
    <a href="#" class="btn btn-white dark:bg-transparent dark:border-slate-400 dark:text-slate-100 dark:hover:shadow-slate-900/50 dark:hover:border-slate-100 space-x-2 group">
      <%= icon "phone", classes: "w-5 h-5 text-slate-500 dark:text-slate-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400" %>
      <span>Phone</span>
    </a>
    <a href="#" class="btn btn-white dark:bg-transparent dark:border-slate-400 dark:text-slate-100 dark:hover:shadow-slate-900/50 dark:hover:border-slate-100 space-x-2 group">
      <%= icon "envelope", classes: "w-5 h-5 text-slate-500 dark:text-slate-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400" %>
      <span>Email</span>
    </a>
  </div>
</div>
<div class="rounded-lg shadow-lg shadow-slate-300/70 bg-white py-4 px-6 flex flex-wrap items-center w-auto dark:bg-slate-800 dark:shadow-slate-900/50 dark:text-white">
  <%= image_tag "#", class: "object-cover w-16 h-16 rounded-full flex-shrink-0" %>
  <div class="pl-3 flex-1 flex flex-col items-start space-y-px text-slate-700">
    <p class="font-bold dark:text-white">John Doe</p>
    <p class="text-sm dark:text-slate-300">Software Architect at <%= link_to "Amazon", "https://amazon.com", target: :_blank, class: "btn-link" %></a></p>
  </div>
  <div class="grid gap-3 grid-cols-2 lg:pt-0 pt-3 w-full lg:w-auto">
    <%= link_to "#", class: "btn btn-white dark:bg-transparent dark:border-slate-400 dark:text-slate-100 dark:hover:shadow-slate-900/50 dark:hover:border-slate-100 space-x-2 group" do %>
      <%= icon "phone", classes: "w-5 h-5 text-slate-500 dark:text-slate-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400" %>
      <span>Phone</span>
    <% end %>
    <!-- * The mail_to helper doesn't play too nicely with blocks so we have to rig it up a bit -->
    <% mail_content = capture do %>
      <%= icon "envelope", classes: "w-5 h-5 text-slate-500 dark:text-slate-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400" %>
      <span>Email</span>
    <% end %>

    <%= mail_to "railsui@example.com", mail_content, class: "btn btn-white dark:bg-transparent dark:border-slate-400 dark:text-slate-100 dark:hover:shadow-slate-900/50 dark:hover:border-slate-100 space-x-2 group" %>
  </div>
</div>
.rounded-lg.shadow-lg.bg-white.py-4.px-6.flex.flex-wrap.items-center.w-auto.dark:bg-slate-800.dark:text-white{class: "shadow-slate-300/70 dark:shadow-slate-900/50"}
  = image_tag "#", class: "object-cover w-16 h-16 rounded-full flex-shrink-0"
  .pl-3.flex-1.flex.flex-col.items-start.space-y-px.text-slate-700
    %p.font-bold.dark:text-white John Doe
    %p.text-sm.dark:text-slate-300 Software Architect at
      = link_to "Amazon", "https://amazon.com", target: :_blank, class: "btn-link"
  .grid.gap-3.grid-cols-2.lg:pt-0.pt-3.w-full.lg:w-auto
    = link_to "#", class: "btn btn-white dark:bg-transparent dark:border-slate-400 dark:text-slate-100 dark:hover:shadow-slate-900/50 dark:hover:border-slate-100 space-x-2 group"
      = icon "phone", classes: "w-5 h-5 text-slate-500 dark:text-slate-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400"
      %span Phone

    / * The mail_to helper doesn't play too nicely with blocks so we have to rig it up a bit
    - mail_content = capture do
      = icon "envelope", classes: "w-5 h-5 text-slate-500 dark:text-slate-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400"
      %span Email

    = mail_to "railsui@example.com", mail_content, class: "btn btn-white dark:bg-transparent dark:border-slate-400 dark:text-slate-100 dark:hover:shadow-slate-900/50 dark:hover:border-slate-100 space-x-2 group"

Cards

User card with dropdown

JavaScript

Use the data-controller="dropdown" attribute to initialize a new dropdown component using Stimulus.js. To add transition effects to components like dropdowns, we prefer an additional dependency called stimulus-use. Read the Dropdown component documentation for more information.

Stimulus.js and stimulus-use are already installed as a dependency of the Hound theme.

Jane Doe

December 8 at 12:50 PM

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptas quod maxime doloremque velit sapiente aut inventore laboriosam perferendis facere cumque. Rem quibusdam maxime quia temporibus, esse suscipit corrupti aperiam repudiandae.

<div class="rounded-lg shadow-lg shadow-slate-300/30 bg-white p-6 flex flex-wrap items-center w-auto dark:bg-slate-800 dark:shadow-slate-900/50">
  <img class="object-cover w-16 h-16 rounded-full flex-shrink-0" src="https://source.unsplash.com/random/200x200/?female portrait&orientation=landscape" />
  <div class="pl-3 flex-1 flex flex-col items-start space-y-px text-slate-700 dark:text-white">
    <p class="font-bold">Jane Doe</p>
    <p class="text-sm dark:text-slate-300">December  8 at 12:50 PM</p>
  </div>
  <div data-controller="dropdown" class="relative">
    <button type="button" data-action="dropdown#toggle click@window->dropdown#hide" class="relative group border-transparent border transition ease-in-out focus:ring-4 w-8 h-8 flex items-center justify-center rounded-lg hover:border-slate-200 focus:ring-slate-50 hover:bg-white hover:shadow-sm focus:border-slate-200 dark:focus:border-slate-700 dark:hover:bg-slate-700/80 dark:hover:border-slate-700 dark:focus:ring-slate-400/50">
      <%= icon "ellipsis-vertical", classes: "w-6 h-6 text-slate-500 group-hover:text-indigo-500 dark:text-slate-200 dark:group-hover:text-indigo-300" %>
    </button>
    <ul
      class="hidden transition transform origin-to-right absolute right-0 top-9 bg-white rounded-lg shadow-xl shadow-slate-900/10 border border-slate-200 min-w-[200px] z-50 py-2 dark:bg-slate-700 dark:shadow-slate-900/50 dark:border-slate-500/60 text-sm font-medium text-slate-600 dark:text-slate-200"
      data-dropdown-target="menu"
      data-transition-enter-from="opacity-0 scale-95"
      data-transition-enter-to="opacity-100 scale-100"
      data-transition-leave-from="opacity-100 scale-100"
      data-transition-leave-to="opacity-0 scale-95"
      >
      <li>
        <a href="#" class="px-4 py-[.4rem] hover:text-indigo-600 block dark:hover:text-indigo-300">Follow</a>
      </li>
      <li>
        <a href="#" class="px-4 py-[.4rem] hover:text-indigo-600 block dark:hover:text-indigo-300">Save for later</a>
      </li>
      <li>
        <a href="#" class="px-4 py-[.4rem] hover:text-indigo-600 block dark:hover:text-indigo-300">Mute</a>
      </li>
    </ul>
  </div>
  <!-- additional content -->
</div>
<div class="rounded-lg shadow-lg shadow-slate-300/30 bg-white p-6 flex flex-wrap items-center w-auto dark:bg-slate-800 dark:shadow-slate-900/50">
  <%= image_tag "#", class: "object-cover w-16 h-16 rounded-full flex-shrink-0" %>
  <div class="pl-3 flex-1 flex flex-col items-start space-y-px text-slate-700 dark:text-white">
    <p class="font-bold">Jane Doe</p>
    <p class="text-sm dark:text-slate-300">December  8 at 12:50 PM</p>
  </div>
  <div data-controller="dropdown" class="relative">
    <button type="button" data-action="dropdown#toggle click@window->dropdown#hide" class="relative group border-transparent border transition ease-in-out focus:ring-4 w-8 h-8 flex items-center justify-center rounded-lg hover:border-slate-200 focus:ring-slate-50 hover:bg-white hover:shadow-sm focus:border-slate-200 dark:focus:border-slate-700 dark:hover:bg-slate-700/80 dark:hover:border-slate-700 dark:focus:ring-slate-400/50">
      <%= icon "ellipsis-vertical", classes: "w-6 h-6 text-slate-500 group-hover:text-indigo-500 dark:text-slate-200 dark:group-hover:text-indigo-300" %>
    </button>
    <ul
      class="hidden transition transform origin-to-right absolute right-0 top-9 bg-white rounded-lg shadow-xl shadow-slate-900/10 border border-slate-200 min-w-[200px] z-50 py-2 dark:bg-slate-700 dark:shadow-slate-900/50 dark:border-slate-500/60 text-sm font-medium text-slate-600 dark:text-slate-200"
      data-dropdown-target="menu"
      data-transition-enter-from="opacity-0 scale-95"
      data-transition-enter-to="opacity-100 scale-100"
      data-transition-leave-from="opacity-100 scale-100"
      data-transition-leave-to="opacity-0 scale-95"
      >
      <li>
        <%= link_to "Follow", "#", class: "px-4 py-[.4rem] hover:text-indigo-600 block dark:hover:text-indigo-300" %>
      </li>
      <li>
        <%= link_to "Save for later", "#", class: "px-4 py-[.4rem] hover:text-indigo-600 block dark:hover:text-indigo-300" %>
      </li>
      <li>
        <%= link_to "Mute", "#", class: "px-4 py-[.4rem] hover:text-indigo-600 block dark:hover:text-indigo-300" %>
      </li>
    </ul>
  </div>
  <!-- additional content -->
</div>
.rounded-lg.shadow-lg.bg-white.p-6.flex.flex-wrap.items-center.w-auto.dark:bg-slate-800{class: "shadow-slate-300/30 dark:shadow-slate-900/50"}
  = image_tag unsplash_url(item: "female portrait", width: 200, height: 200), class: "object-cover w-16 h-16 rounded-full flex-shrink-0"
  .pl-3.flex-1.flex.flex-col.items-start.space-y-px.text-slate-700.dark:text-white
    %p.font-bold Jane Doe
    %p.text-sm.dark:text-slate-300= Time.zone.now.strftime("%B %e at %l:%M %p")
  .relative{"data-controller" => "dropdown"}
    %button.relative.group.border-transparent.border.transition.ease-in-out.focus:ring-4.w-8.h-8.flex.items-center.justify-center.rounded-lg.hover:border-slate-200.focus:ring-slate-50.hover:bg-white.hover:shadow-sm.focus:border-slate-200.dark:focus:border-slate-700.dark:hover:border-slate-700{class: "dark:hover:bg-slate-700/80 dark:focus:ring-slate-400/50", "data-action" => "dropdown#toggle click@window->dropdown#hide", type: "button"}
      = icon "ellipsis-vertical", classes: "w-6 h-6 text-slate-500 group-hover:text-indigo-500 dark:text-slate-200 dark:group-hover:text-indigo-300"
    %ul.hidden.transition.transform.origin-to-right.absolute.right-0.top-9.bg-white.rounded-lg.shadow-xl.border.border-slate-200.z-50.py-2.dark:bg-slate-700.text-sm.font-medium.text-slate-600{class: "shadow-slate-900/10 min-w-[200px] dark:shadow-slate-900/50 dark:border-slate-500/60 dark:text-slate-200", "data-dropdown-target" => "menu", "data-transition-enter-from" => "opacity-0 scale-95", "data-transition-enter-to" => "opacity-100 scale-100", "data-transition-leave-from" => "opacity-100 scale-100", "data-transition-leave-to" => "opacity-0 scale-95"}
      %li
        %a.px-4.hover:text-indigo-600.block.dark:hover:text-indigo-300{class: "py-[.4rem]", href: "#"} Follow
      %li
        %a.px-4.hover:text-indigo-600.block.dark:hover:text-indigo-300{class: "py-[.4rem]", href: "#"} Save for later
      %li
        %a.px-4.hover:text-indigo-600.block.dark:hover:text-indigo-300{class: "py-[.4rem]", href: "#"} Mute
  / additional content
// app/javascript/controllers/dropdown_controller.js

import { Controller } from '@hotwired/stimulus'
import { useTransition } from 'stimulus-use'

export default class extends Controller {
  static targets = ['menu', 'trigger']

  connect() {
    useTransition(this, {
      element: this.menuTarget,
    })
  }

  toggle() {
    this.toggleTransition()
  }

  hide(event) {
    if (
      !this.element.contains(event.target) &&
      !this.menuTarget.classList.contains('hidden')
    ) {
      this.leave()
    }
  }
}

Buttons

Dropdowns