Skip to navigation Skip to main content
Eleventy
11ty.dev Style Guide
Blog
11ty is joining Font AwesomeIndieWeb Avatar for https://fontawesome.com/
Versions
Stable
3.0.0
Toggle Menu
Compare ×4000 file build
Eleventy 1.93s
Gatsby 29.05s

Specialized Components

Build Cost

Build Cost -1 Build Cost 0 Build Cost 1 Build Cost 2 Build Cost 3 Build Cost 4 Build Cost 5 Build Cost 5 Build Cost 99
Serve Cost 1
+1 Build Cost -1 Build Cost

Added In

Version Tag
v0.12.1
v1.0.0
v1.0.0-canary.1
v2.0.0 Added in v2.0.0
v2.0.0-canary.1 Added in v2.0.0
v2.0.0-alpha.1 Added in v2.0.0
v3.0.0 Added in v3.0.0
v3.0.0-alpha.1 Added in v3.0.0
v4.0.0 Added in v4.0.0
v4.0.0-alpha.1 Pre-release only: v4.0.0-alpha.1

Plugins

Version Tag
Image v4.0.0 Added in Image v4.0.0

Header/Footer

Home Header

Skip to navigation Skip to main content
Eleventy
11ty.dev Style Guide

Docs Header

Skip to navigation Skip to main content
Eleventy
11ty.dev Style Guide

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

Unstyled box with an inline Code block
Custom Label
Unstyled box with an inline Code block
Super long custom label that we want to wrap nicely—does it?
Unstyled box with an inline Code block
Default message with an inline Code block
INFO:
Default info message with an inline Code block
WARNING:
Default warning message with an inline Code block
ERROR:
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