Card Figma Code Connected

Cards are useful to group high profile information together into one bite-sized unit. User info, activities, or other complex data items are great to summarize and provide related actions in a card.

Default card

Create a default card by adding the class .hc-card to any block-level element. The only required content is a main content section with class .hc-card-main, which includes at least a title as an <h5> inside of a wrapping element with class .hc-card-title.

This extra markup is required to handle the positioning for other types of content that may appear here, like a badge and subheader.

2024-25 Enrollment Forms

Registration

New student enrollment packet for the 2024-25 school year.

HTML

Expand Edit in Playground Copy


<div class="hc-card w-96">
  <section class="hc-card-main">
    <div class="hc-card-title">
      <h5 class="hc-card-title-text">2024-25 Enrollment Forms</h5>
      <span class="hc-badge hc-badge--info">Registration</span>
    </div>
    <span class="hc-card-sub">New student enrollment packet for the 2024-25 school year.</span>
  </section>
  <footer class="hc-card-footer">
    <div class="hc-card-data">
      <span class="hc-card-data--primary">Due August 1, 2024</span>
      <span class="hc-card-data--secondary">
        <i class="hc-icon hc-icon--clock hc-icon--12"></i>
        Pending
      </span>
    </div>
    <div class="hc-card-actions">
      <button class="hc-button hc-button--primary">
        Start form
      </button>
    </div>
  </footer>
</div>

Add a subheader inside of the main content section right after the title, using class .hc-card-sub on any element.

You can include an optional footer for additional data and actions by adding a block-level element with class .hc-card-footer as a sibling of the main content section.

This footer can include a left-aligned data section with class .hc-card-data and up to 2 inline elements. The first one will be a normal font size; the second one if included will be smaller and should have the class .hc-card-data--secondary to ensure this.

The footer can also include a right-aligned actions section with class .hc-card-actions. Add 1 or 2 buttons here, with the primary button the furthest to the right.

Stacked cards

Stacked cards indicate a collection or more than one related item. They can show that the card represents a group or collection of cards, or that there are more things to be done after this focused card is addressed.

Create one by adding the modifier class .hc-card--stack to the main element. By default only one additional stacked card is present at the bottom, but you can add the additional class .hc-card--stack--full to add a second one.

Note that because these use pseudo-elements for the stacked effect, a 0.5rem margin is applied to the bottom of these cards to enforce an appropriate gap. Spacing of the cards should always be handled by the gap property so this should not matter.

2024-25 Enrollment Forms

Registration

New student enrollment packet for the 2024-25 school year.

HTML

Expand Edit in Playground Copy


<div class="hc-card hc-card--stack hc-card--stack--full w-96">
  <section class="hc-card-main">
    <div class="hc-card-title">
      <h5 class="hc-card-title-text">2024-25 Enrollment Forms</h5>
      <span class="hc-badge hc-badge--info">Registration</span>
    </div>
    <span class="hc-card-sub">New student enrollment packet for the 2024-25 school year.</span>
  </section>
  <footer class="hc-card-footer">
    <div class="hc-card-data">
      <span class="hc-card-data--primary">Due August 1, 2024</span>
      <span class="hc-card-data--secondary">
        <i class="hc-icon hc-icon--clock hc-icon--12"></i>
        Pending
      </span>
    </div>
    <div class="hc-card-actions">
      <button class="hc-button hc-button--primary">
        Start form
      </button>
    </div>
  </footer>
</div>

Semantic cards

Semantic alternatives for info and danger are available to signify some alert or enhanced state.

Info cards are good to show priority or prominence without signifying some issue, whereas danger cards are good to alert the user that a deadline has passed or some other urgency.

Lunch room volunteer

Parent

Submit this form to get on our rotation of lunch monitors!

2024-25 Enrollment Forms

Registration

New student enrollment packet for the 2024-25 school year.

HTML

Expand Edit in Playground Copy


<div class="hc-card-grid-cols">
  <div class="hc-card hc-card--info">
    <section class="hc-card-main">
      <div class="hc-card-title">
        <h5 class="hc-card-title-text">Lunch room volunteer</h5>
        <span class="hc-badge hc-badge--success">Parent</span>
      </div>
      <span class="hc-card-sub">Submit this form to get on our rotation of lunch monitors!</span>
    </section>
    <footer class="hc-card-footer">
      <div class="hc-card-data">
        <span class="hc-card-data--primary hc-card-data--info">Due back by Friday!</span>
      </div>
      <div class="hc-card-actions">
        <button class="hc-button hc-button--primary">
          Start form
        </button>
      </div>
    </footer>
  </div>
  <div class="hc-card hc-card--danger">
    <section class="hc-card-main">
      <div class="hc-card-title">
        <h5 class="hc-card-title-text">2024-25 Enrollment Forms</h5>
        <span class="hc-badge hc-badge--info">Registration</span>
      </div>
      <span class="hc-card-sub">New student enrollment packet for the 2024-25 school year.</span>
    </section>
    <footer class="hc-card-footer">
      <div class="hc-card-data">
        <span class="hc-card-data--primary hc-card-data--danger">Due 5 days ago</span>
      </div>
      <div class="hc-card-actions">
        <button class="hc-button hc-button--primary">
          Start form
        </button>
      </div>
    </footer>
  </div>
</div>

User cards

Cards with user information can provide a discrete block for related actions or metadata about the user. Combine an avatar next to the name, or stacked avatar to show a user and a group.

Tommy Biscotti

FE FS

Freddie Spaghetti Fairview Elementary School

HTML

Expand Edit in Playground Copy


<div class="hc-card-grid-cols">
  <div class="hc-card">
    <section class="hc-card-main">
      <div class="hc-card-title">
        <span class="hc-avatar hc-avatar--blue">TB</span>
        <h5 class="hc-card-title-text">Tommy Biscotti</h5>
      </div>
    </section>
    <footer class="hc-card-footer">
      <div class="hc-card-data">
        <div class="hc-tooltip-group">
          <a href="/" class="flex items-center gap-1 bg-danger-100 rounded-full px-2 py-1">
            <i class="hc-icon hc-icon--warning-triangle hc-icon--danger hc-icon--20"></i>
            <span class="hc-indicator-count hc-indicator--danger">3</span>
          </a>
          <span class="hc-tooltip hc-tooltip--top">
            3 alerts
          </span>
        </div>
      </div>
      <div class="hc-card-actions">
        <button class="hc-button hc-button--primary">
          Notes
        </button>
        <button class="hc-button hc-button--primary">
          View profile
        </button>
      </div>
    </footer>
  </div>
  <div class="hc-card">
    <section class="hc-card-main">
      <div class="hc-card-title">
        <div class="hc-avatar-stack">
          <span class="hc-avatar hc-avatar--yellow">FE</span>
          <span class="hc-avatar hc-avatar--green">FS</span>
        </div>
        <h5 class="hc-card-title-text hc-card-title--col">
          <span>Freddie Spaghetti</span>
          <small class="font-normal">Fairview Elementary School</small>
        </h5>
      </div>
    </section>
    <footer class="hc-card-footer">
      <div class="hc-card-actions">
        <button class="hc-button hc-button--primary">
          Notes
          <span class="hc-indicator-count">1</span>
        </button>
        <button class="hc-button hc-button--primary">
          View profile
        </button>
      </div>
    </footer>
  </div>
</div>

Size handling

Cards have no minimum or maximum width by default, so it’s important to control their sizing with whatever wrapper element you use.

Honeycomb provides a simple but complete scaffolding framework that handles this nicely out of the box, leveraging CSS grid template columns and container queries.

Default card grid

For out-of-the-box handling, create an element with class .hc-card-grid and then a child with class .hc-card-grid-cols. Any cards you place inside will be sized and wrapped automatically.

Here’s an example that has five cards inside of the default card grid. Note that each card is sized equally despite the odd number. If you shrink or expand the screen, the cards should resize automatically and show between 1 and 2 per row.

Card title

Regular card description

Card title

Longer card description that wraps to two lines everywhere. Note how other cards respond.

Card title

Regular card description

Card title

Regular card description

Card title

Regular card description

HTML

Expand Edit in Playground Copy


<div class="hc-card-grid">
  <div class="hc-card-grid-cols">
    <div class="hc-card">
      <section class="hc-card-main">
        <div class="hc-card-title">
          <h5 class="hc-card-title-text">Card title</h5>
        </div>
        <span class="hc-card-sub">Regular card description</span>
      </section>
    </div>
    <div class="hc-card">
      <section class="hc-card-main">
        <div class="hc-card-title">
          <h5 class="hc-card-title-text">Card title</h5>
        </div>
        <span class="hc-card-sub">Longer card description that wraps to two lines everywhere. Note how other cards respond.</span>
      </section>
    </div>
    <div class="hc-card hc-card--stack">
      <section class="hc-card-main">
        <div class="hc-card-title">
          <h5 class="hc-card-title-text">Card title</h5>
        </div>
        <span class="hc-card-sub">Regular card description</span>
      </section>
    </div>
    <div class="hc-card">
      <main class="hc-card-main">
        <div class="hc-card-title">
          <h5 class="hc-card-title-text">Card title</h5>
        </div>
        <span class="hc-card-sub">Regular card description</span>
      </main>
    </div>
    <div class="hc-card">
      <section class="hc-card-main">
        <div class="hc-card-title">
          <h5 class="hc-card-title-text">Card title</h5>
        </div>
        <span class="hc-card-sub">Regular card description</span>
      </section>
    </div>
  </div>
</div>

Click the expand button in the code sample above to see how the cards operate on your entire viewport. In a wider wrapping element you would see more than two (or even three) cards. Each card in a row will also adapt to fit the entire row’s height.

Technical details

We unfortunately need to have 2 wrapper elements because we’re making use of CSS container queries.

By default on small screens, the cards stack vertically and fill the entire width.
When the .hc-card-grid wrapper (not the screen) is larger than mobile, the inner wrapping element changes to use grid-template-columns with a value of repeat(auto-fill, minmax(16rem, 1fr)); This repeats the cards and sizes them to be the larger of 16rem or the remaining available space.
Finally, when the container is 51rem wide, the new minimum card size is 20rem instead of 16rem. We chose 51rem to prevent 3 cards from sitting in a row too early.

This is the CSS for this, for the curious:


.hc-card-grid {
    container-type: inline-size;
    container-name: card-grid;
}

.hc-card-grid-cols {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@container card-grid (min-width: 24rem) { 
    .hc-card-grid-cols {
        grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    }
}
@container card-grid (min-width: 37.5rem) {
    .hc-card-grid-cols {
        gap: 1.5rem;
    }
}
@container card-grid (min-width: 51rem) {
    .hc-card-grid-cols {
        grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    }
}