Typography Showcase

EdibleCSS provides beautiful typography for all text elements with zero configuration.

Headings

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

Paragraphs and Links

This is a regular paragraph with a link in it. Links are underlined and change on hover. You can also use bold text and italic text for emphasis.

Text Formatting

Bold text | Italic text | Small text | Highlighted text | Deleted text | Inserted text | inline code

Blockquotes

This is a blockquote. It's useful for highlighting important quotes or notes from external sources.

— EdibleCSS Documentation

Code Blocks

Install EdibleCSS with npm:

npm install edible-css

Or use the CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/svmukhin/edible-css@main/dist/edible.min.css">

Lists

Unordered List

• First item
• Second item with nested list:
  • Nested item 1
  • Nested item 2
• Third item

Ordered List

1. First step
2. Second step
3. Third step

Definition List

EdibleCSS

A classless CSS framework for developers with no design skills

Semantic HTML

HTML that uses tags to convey meaning, not just presentation