✴︎

Craft Design System

Craft is an open-source design system for building content sites and user interfaces. It was created by Bridger Tower.

+ Get Started with Craft+ View on GitHub+ View an Article Example
Craft is a minimalist Design System that combines a single component file and a single CSS file with Next.js best practices for building websites quickly. It leverages Next.js, Tailwind, shadcn/ui, and TypeScript to provide a streamlined development experience while maintaining a clean, modern aesthetic.

Headings

HTML Attribute

h1

Preview

Heading 1

HTML Attribute

h2

Preview

Heading 2

HTML Attribute

h3

Preview

Heading 3

HTML Attribute

h4

Preview

Heading 4

HTML Attribute

h5

Preview

Heading 5

HTML Attribute

h6

Preview

Heading 6

Text Styles

HTML Attribute

p

Preview

Regular paragraph text.

HTML Attribute

lead

Preview

Lead paragraph text that stands out from regular text.

HTML Attribute

large

Preview

Large text that's bigger than regular text.

HTML Attribute

small

Preview

Small text that's smaller than regular text.

HTML Attribute

muted

Preview

Muted text with reduced emphasis.

Lists

HTML Attribute

ul

Preview

This is an example of an unordered list

  • Unordered list item 1
  • Unordered list item 2
  • Unordered list item 3

HTML Attribute

ol

Preview

This is an example of an ordered list

  1. Ordered list item 1
  2. Ordered list item 2
  3. Ordered list item 3

HTML Attribute

dl

Preview

Definition Term
Definition description explaining the term above.
Another Term
Another description for the term above.

Block Elements

HTML Attribute

blockquote

Preview

A well-known quote, contained in a blockquote element.- Source Attribution

HTML Attribute

pre

Preview

function example() {
  console.log("Hello World");
}

HTML Attribute

details

Preview

Click to expand

Hidden content that appears when expanded.

HTML Attribute

figure

Preview

Example
A sample image with a caption

Inline Elements

HTML Attribute

a

Preview

Sample link with hover state

HTML Attribute

strong

Preview

Strong text for emphasis

HTML Attribute

code

Preview

Inline code element

HTML Attribute

kbd

Preview

Ctrl + C

HTML Attribute

mark

Preview

Highlighted text

HTML Attribute

abbr

Preview

HTML

HTML Attribute

sub,sup

Preview

Text with subscript and superscript

Tables

HTML Attribute

table

Preview

Header 1Header 2Header 3
Cell 1Cell 2Cell 3
Cell 4Cell 5Cell 6

Form Elements

HTML Attribute

input

Preview

HTML Attribute

textarea

Preview

HTML Attribute

select

Preview

HTML Attribute

checkbox

Preview

HTML Attribute

radio

Preview

Additional Elements

HTML Attribute

hr

Preview

Text before horizontal rule

Text after horizontal rule

HTML Attribute

small

Preview

Small text element

HTML Attribute

video

Preview

HTML Attribute

nested-lists

Preview

  • Parent item 1
  • Parent item 2
    • Child item 1
    • Child item 2
  • Parent item 3

HTML Attribute

task-list

Preview

  • Completed task
  • Pending task

HTML Attribute

table-of-contents

Preview

HTML Attribute

footnotes

Preview

  1. First footnote reference
  2. Second footnote reference

© 2024 Bridger Tower