Web browsers provide default styles for HTML elements. Some elements in the framework retain those browser defaults, but most have a minimal amount of opinionated styling applied to them.

• Browser Defaults
• Abbreviations
• Addresses
• Anchors
• Blockquotes
• Buttons
• Code
• Details & Summary
• Figures
• Forms
• Headings
• Horizontal Rules
• Images
• Lists
  • Description Lists
  • Ordered Lists
  • Unordered Lists
• Marks
• Paragraphs
• Progress
• Quotes
• Small
• Subscripts & Superscripts
• Tables

Browser Defaults

Use the <del> tag for text that is meant to be treated as deleted text.

Use the <s> tag for text that is meant to be treated as no longer accurate or no longer relevant.

Use the <ins> tag for text that is meant to be treated as an addition to the document.

Use the <u> tag for underlined text.

Use the <strong> tag for text with strong importance.

Use the <b> tag or the .dcf-bold class for bold text without conveying any extra importance.

Use the <em> tag to stress text of linguistic import, the way you would emphasize pronunciation if the same text was spoken.

Use the <i> tag or the .dcf-italic class to italicize text without conveying any extra importance.

Use the <time> tag along with the datetime content attribute to display dates and time:

<time datetime="2018-07-01">July 1</time> – <time datetime="2018-07-02">2</time>

Abbreviations

<abbr>

Abbreviations should be spelled out on first occurrence, then abbreviated using the <abbr> element on subsequent occurrences.

Addresses

<address>

The address element should be used for physical or digital contact information for a person, people or an organization.

Anchors

<a>

Use to link to other content.

This is an anchor link. If the link goes to an external site and does not contain an image or SVG as a child, an icon will be appended to the link to indicate external content to users.

Blockquotes

<blockquote>

The blockquote element mostly retains browser default styling, but its measure is restricted to prevent unnecessarily long lines, aiding readability.

Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue.

Related: Quotes (Elements), Blockquotes (Components)

Buttons

<button>

<input type="button">

<input type="submit">

Baseline button styles to reset display, padding, font-size, line-height, and text alignment.

Related: Button Groups (Components), Buttons (Components), Forms (Components), Input Groups With Buttons (Components)

Code

<code>

Wrap inline snippets of code with <code>. Be sure to escape HTML angle brackets.

<pre>

Wrap multiple lines of code with <pre>. Use the .dcf-pre component class to retain code styling.

<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Nulla vitae elit libero, a pharetra augue.</p>

<var>

These are variables:

<kbd>

This is user input:

<samp>

This is sample output:

Related: Code (Components)

Details & Summary

<details>

<summary>

Combine these elements to build a native accordion (i.e., content that can be expanded and contracted).

Figures

<figure>

The browser default margins have been removed from the figures.

Related: Figures (Components)

Forms

<form>

<fieldset>

<legend>

<label>

<input>

<select>

<option>

<textarea>

Styles applied directly to form elements are intentionally kept to a minimum.

Related: Buttons (Elements), Buttons (Components), Forms (Components), Input Groups (Components)

Headings

<h1>

<h2>

<h3>

<h4>

<h5>

<h6>

Headings should be selected to accurately convey content hierarchy, not to resize text for the aesthetic needs of the page layout. Instead, use utility classes to increase or decrease a heading's font-size.

Related: Headings (Components), Font Size (Utilities)

Horiztonal Rules

<hr>

The horizontal rule marks a thematic division of content on the page.

Related: Border Color (Utilities), Border Style (Utilities), Border Width (Utilities)

Images

<img>

Ensure that accurate descriptions of the image content are included in the alt attribute of each image for accessibility.

Related: Aspect Ratios (Utilities), Object-Fit (Utilities)

Lists

Description Lists

<dl>

<dt>

<dd>

The description list (once known as the definition list) is used to mark up groups of terms and descriptions.

Term 1

Description 1

Term 2

Description 1 for Term 2

Description 2 for Term 2

Term 3

Term 4

Term 5

Description for Terms 3, 4 and 5

Ordered Lists

<ol>

<li>

The ordered list prepends each list item with a sequential number.

1. This is the most important thing.
2. This is the second most important thing.
3. This is the third most important thing.
4. This is the fourth most important thing.
5. This is the least important thing.

Unordered Lists

<ul>

<li>

The unordered list prepends each list item with a bullet.

• Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
• Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod.
• Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
• Maecenas faucibus mollis interdum.
• Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Related: Lists (Components), Pagination (Components)

Marks

<mark>

Use the mark element to highlight text.

Paragraphs

<p>

Use the paragraph element to mark up—you guessed it—paragraphs:

Progress

<progress>

Display the completion progress of a task. Remember to use a <label> that includes a for attribute that matches the unique id attribute in the <progress>.

<div class="dcf-d-flex dcf-ai-center dcf-gap-3">
  <label class="dcf-label" for="unique-progress-bar-id">Progress</label>
  <progress class="dcf-w-12" id="unique-progress-bar-id" value="70" max="100">70 %</progress>
</div>

Related: Forms (Elements), Forms (Components), Flexbox (Utilities), Gap (Utilities)

Quotes

<q>

Smart or curly quotes are applied to inline quotes—no need to add your own.

Related: Blockquotes (Elements), Blockquotes (Components)

Small

<small>

The small element is intended for inline text meant to be treated as fine print. It does not change the font-size. Add a font-size utility class (like .dcf-txt-xs) to the small element to reduce its font-size.

Related: Font Size (Utilities)

Subscripts & Superscripts

<sub>

Subscripts reduce the font-size and place copy slightly below the baseline, like H₂O.

<sup>

Superscripts reduce the font-size and elevate the copy slightly above the cap line, like 2² = 4.

Tables

<table>

<caption>

<thead>

<tbody>

<tfoot>

<tr>

<th>

<td>

Table borders are collapsed and the background is made transparent.

Related: Tables (Components)