Stand with Ukraine 🇺🇦
Eleventy
The possum is Eleventy’s mascot

11ty.dev Style Guide

This is an older version of Eleventy. Go to the newest Eleventy docs (current path: /styleguide/) or the full release history.
Menu

Header/Footer

Home Header

Stand with Ukraine 🇺🇦
Eleventy
The possum is Eleventy’s mascot

Home Header

Docs Header

Stand with Ukraine 🇺🇦
Eleventy
The possum is Eleventy’s mascot

Docs Header

Footer Navigation

Lists

Inline List

Number Flags

1 2 3 4 5 6 7 8 9

Number Flags in Headings

Step 1 Notice how the border disappears under the flag

Step 2 Do a thing

Step 3 Do a thing

Step 4 Do a thing

Blockquotes

“Seriously can't remember enjoying using a Static Site Generator this much. Yes Hugo is rapid, but this is all so logical. It feels like it was designed by someone who has been through lots of pain and success using other SSGs.”—GitHub Avatar for philhawksworthPhil Hawksworth

Buzzwords

Inline Buzzwords

This Buzzword is in a header

This Buzzword is in a header

Buzzword

Buzzword

Buzzword Lists

Callout

Default message with an inline Code block
Default info message with an inline Code block
Default warning message with an inline Code block
Default error message with an inline Code block
Default demo with an inline Code block. Default demo with an inline Code block. Default demo with an inline Code block.

Sticky info block

Use the elv-callout-sticky class to affix to the top of the viewport while scrolling.

OpenGraph card

OpenGraph image for https://www.meetup.com/JAMstack-Toronto/events/281278073/The 11ties: 11 Minute Talks about 11ty on 11/11