Hello world!
The content element makes sure things like spacing, colors, and sizing look right for the 'classic' HTML content tags.
It's very helpful for rendering markdown!
Have as many paragraphs as you want.
— Miles McCain
<section class='content ~neutral'>
<h2>Hello world!</h2>
<p>The content element makes sure things like spacing, colors, and sizing
look right for the 'classic' HTML content tags.</p>
<blockquote>
<p>It's very helpful for rendering markdown!</p>
<p>Have as many paragraphs as you want.</p>
<cite>— Miles McCain</cite>
</blockquote>
</section>Overview
The content element automatically styles a set of core HTML tags without requiring any classes be applied directly. It makes sure that their relative spacing is nice, too — from a typographical perspective, this element is somewhat opinionated. Fortunately, its opinions are backed by typographic best practices. It is quite similar to the Tailwind CSS typography plugin.
The content element will automatically style the following elements, if inside a .content selector:
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>(as heading with automatic sizing)<code>(as code)<pre>(as pre)<kbd>(as kbd)<li>,<ol>,<ul><a><strong><b><blockquote>(as a neutral aside)<table>(as a table)
In addition, the content element will apply the following spacing rules to its children (note that units are Tailwind spacing units).
- At least a margin of 3 between each element (including paragraphs)
- A margin of 12 before each h1, unless it’s the first element
- A margin of 10 before each h2, unless it’s the first element
- A margin of 8 before each h3, unless it’s the first element
- A margin of 6 before each h4, h5, h6, unless it’s the first element
- A horizontal margin of 1px before and after
<code>and<kbd>elements - A left margin of 8 on all lists
- A margin of 5 before and after
<blockquote>s (and a margin of 1 before the<cite>element)
Considerations
Cascading effects — The content element defines spacing and styling for core HTML elements, even if no classes are applied. While this is partly what makes it useful (after all, it makes displaying rendered markdown a breeze), it can also have cascading effects that make it difficult to build complex components inside it. Use the content class on as little content as you can to avoid these side effects. (It’s perfect to use on your body text, for example, but avoid setting it on your root <body> element.)
Variants
Beyond customization, the content element has no variants.
Accessibility
The content block is generally good for accessibility. That’s because it encourages the use of semantic HTML elements, like <p>, <h1>, and <blockquote>. And, because most of a content element is just text, screenreaders can handle it perfectly.
Don't use color to communicate. Instead, use color to support information you communicate through text. When this isn't possible, be sure to use a title attribute.
Be mindful of contrast. What looks good to you may not be readable for others. Text contrast is a good thing!
Support all navigation modes. Some people will interact with your interface using assitive technologies and/or a keyboard. Build your interface with these different modes in mind (for example, by setting the `tab-index` attribute on all interactive elements that aren't interactive by default).
Examples
.content selector! It's just rendered markdown.
Example code
Just look at this page! It's all inside a <code>.content</code> selector! It's just rendered markdown.