Drop-in CSS stylesheet for quick styling based on modern CSS features and optional components.

Accordion

This works with the native details and summary elements. No classes need to be added

<details>
  <summary>This is the title of the accordion</summary>
  <p>This is the content of the accordion. It can be as long as you want.</p>
</details>

This is the title of the accordion

This is the content of the accordion. It can be as long as you want.

This is the title of the second accordion

This is the content of the second accordion. It can be as long as you want.

Badge

Use the badge class to create a badge.

<div class="badge">Badge</div>
<div class="badge badge-outline">Badge Outline</div>
<div class="badge badge-primary">Badge Primary</div>

Badge

Badge Outline

Badge Primary

Buttons

Use the btn classes to create a button. If no class is added, the button will be the default button based on the foreground color.

<button>Default</button>
<button class="btn-outline">Outline</button>
<button class="btn-primary">Primary</button>
<button class="btn-primary-outline">Primary Outline</button>
<button class="btn-destructive">Destructive</button>

Disabled buttons

Card

Use the card class to create a card.

<div class="card">
  <h3>Card Title</h3>
  <p>Card content goes here.</p>
</div>

Card

By default the card is as wide as the content.

Children are stacked vertically with a gap of 0.5rem.

Headings and typography

Use the h1, h2, h3, and h4 elements to create headings. The font weight is set to 500 and sizes are fluidly scaled between mobile and desktop.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>

Heading 1

Heading 2

Heading 3

Heading 4

Font size classes

Use these utility classes to set font sizes. Sizes scale fluidly between mobile and desktop.

<p class="text-xs">Extra small</p>
<p class="text-sm">Small</p>
<p class="text-base">Base</p>
<p class="text-lg">Large</p>
<p class="text-xl">Extra large</p>
<p class="text-2xl">2XL</p>
<p class="text-3xl">3XL</p>
<p class="text-4xl">4XL</p>
<p class="text-5xl">5XL</p>

.text-xs — 11.2px → 12px

.text-sm — 12.8px → 14px

.text-base — 14.4px → 16px

.text-lg — 16px → 18px

.text-xl — 17.6px → 20px

.text-2xl — 20px → 24px

.text-3xl — 24px → 32px

.text-4xl — 28px → 48px

.text-5xl — 32px → 64px

There are also utility classes for font weight and text alignment.

<p class="font-normal">Normal weight</p>
<p class="font-medium">Medium weight</p>
<p class="font-bold">Bold weight</p>

Text alignment:

<p class="text-left">Left aligned</p>
<p class="text-center">Center aligned</p>
<p class="text-right">Right aligned</p>

Inputs

Use the form-control class to create a form control. This puts a label and input together and gives them some basic styling.

<div class="form-control">
  <label for="name">Name</label>
  <input type="text" id="name" name="name">
</div>