Skip to content
Skip to content

Base

Provides the default style for all HTML elements.

Version:

This component defines the base look of your page. It offers great typography by setting the default colors, margins, font-sizes and more for each HTML element. This page is a short guide on how to use basic HTML elements and how Atomic styles them.

Headings

Use the <h1> to <h6> elements to define your headings.

h1 Trafalgar

h2 Double pica

h3 Great primer

h4 Pica

h5 Brevier bold
h6 Brevier

Small header segments

By inserting a <small> element into a header Foundation will scale the header font size down for an inline element, allowing you to use this for subtitles or other secondary header text.

Atomic by Jaywing - Version 3.0.0

Paragraphs

The global font-size, line-height and regular margins between elements are set through variables, which can be customized. Paragraphs and other block elements stick to these values.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus corporis cupiditate deleniti illo incidunt iste molestiae quam quia, quidem sapiente sit voluptate! Aut ipsa iste nesciunt praesentium quisquam repudiandae tenetur.

c-text Level Semantics

The following list gives you a short overview of the most commonly used text-level semantics and how to utilize them.

Element Description
<a> Turn text into hypertext using the a element.
<em> Emphasize text using the em element.
<strong> Imply any extra importance using the strong element.
<code> Define inline code snippets using the code element.
<del> Mark document changes as deleted text using the del element.
<ins> Mark document changes as inserted text using the ins element.
<mark> Highlight text with no semantic meaning using the mark element.
<q> Define inline quotations using q element inside a q element.
<abbr> Define an abbreviation using the abbr element with a title.
<dfn> Define a definition term using the dfn element with a title.
<small> De-emphasize text for small print using the small element.

Horizontal rule

Create a horizontal rule by using the <hr> element.

Blockquotes

For quoting multiple lines of content from another source within your document, use the <blockquote> element.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Someone famous

Lists

Create an unordered list using the <ul> element and the <ol> element for ordered lists. The <li> element defines the list item.

  • Item 1
  • Item 2
    • Item 1
    • Item 2
      • Item 1
      • Item 2
  • Item 3
  • Item 4
  1. Item 1
  2. Item 2
    1. Item 1
    2. Item 2
      1. Item 1
      2. Item 2
  3. Item 3
  4. Item 4

Definition lists

Create a description list using the <dl> element. Use <dt> to define the term and <dd> for the description.

Description lists
A description list defines terms and their corresponding descriptions.
This is a term
This is a description.
This is a term
This is a description.

Fluid images

All images are fluid by default. If the layout is narrowed, images adjust their size and keep their proportions. Images shouldn't stretch to bigger than their natural size.

Code blocks

For multiple lines of code, use the <pre> element which defines preformatTed text. It creates a new text block that preserves spaces, tabs and line breaks. Nest a <code> element inside to define the code block.

IMPORTANT Be sure to escape any angle brackets in the code for proper rendering.

<pre>
  <code>...</code>
</pre>