Card · Solid Design System

Types

Cards are flat. Use a filled layer when cards sit on the page background, or a border when they sit on a layer. A grid of cards uses a 1px gap over a gray background, so the lines between them look like Carbon tiles.

Layer

SolidSales

CRM for B2B teams.

Border

SolidPeople

HR and payroll.

<div class="bg-neutral-50 p-6">…</div>
<div class="border border-neutral-200 p-6">…</div>

Tile grid

Leads Deals Reports

<div class="grid grid-cols-3 gap-px bg-neutral-200 border border-neutral-200">
  <a class="bg-surface hover:bg-neutral-50 p-6">…</a>
</div>