Basic HTML

Co-Design has default styles for most important HTML elements, so that you can use them without any problems.

Headings

Co-Design has support for all six headings from <h1> to <h6>.

Example

<h1>This is a h1 heading</h1>
<h2>This is a h2 heading</h2>
<h3>This is a h3 heading</h3>
<h4>This is a h4 heading</h4>
<h5>This is a h5 heading</h5>
<h6>This is a h6 heading</h6>

This is a h1 heading

This is a h2 heading

This is a h3 heading

This is a h4 heading

This is a h5 heading

This is a h6 heading

Paragraphs

HTML paragraphs (<p>) come with default margins and line heights. There are two variants: normal and lead paragraphs. Lead paragraphs are the ones following headings that summarize a page's contents. They generally have the class p.is-lead, but (for user generated content), you can also give the parent of the <p> the class .is-lead.

Example

<p class="is-lead">This is a lead paragraph.</p>
<p>This is a normal paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="is-lead">
    <p>User generated content.</p>
</div>

This is a lead paragraph.

This is a normal paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

User generated content.

Code and Quotation blocks

Co-Design provides default styles for inline code (<code>), code blocks (<pre>) and block quotes (<blockquote>).

It is often recommended to wrap code blocks in both a <code> and then in a <pre> element.

Attention

Thou shalt not use these elements to provide formatting, but semantics.

Example

<p>This paragraph has <code>inline code</code>.</p>
<pre><code>This is a code block</code></pre>
<blockquote>
<p>This is a quote</p>
</blockquote>

This paragraph has inline code.

This is a code block

This is a quote

Insertion and deletion

Co-Design supports standard styles for <ins> and <del>, which should be used to mark that something has been changed (for example in a revision history).

Example

<p>Co-Design is <del>nice</del><ins>awesome</ins>.</p>

Co-Design is ~~nice~~awesome.

Details and Summary

Co-Design has default styles for <details> (with <summary>) elements. These are used to collapse certain parts of the site.

Example

<details>
    <summary>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab nemo, quae, explicabo doloribus quos corporis omnis error ipsum ex quia voluptatibus consectetur neque natus quisquam nulla sunt non impedit ducimus.
    </summary>
    <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Beatae sequi quam sit magni neque repellat, natus debitis necessitatibus a, maxime placeat doloribus alias nobis perferendis non excepturi tenetur, quos porro! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut magnam fugit tempora deserunt sint vel aperiam nemo reiciendis perferendis! Exercitationem culpa velit labore doloribus et quae at commodi porro dicta? Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam consectetur rerum, unde minima reprehenderit laboriosam fugiat deserunt animi? Tenetur sit nisi magnam quis dolorem eius recusandae possimus distinctio, error incidunt! Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia dolor suscipit laudantium ipsam iste ipsa nobis obcaecati impedit sequi exercitationem, quasi rerum repellat omnis, aliquam accusantium at provident eum recusandae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur eos asperiores est ea aliquam aut quasi at ratione similique suscipit laboriosam cupiditate, esse nesciunt, aperiam odio numquam quae soluta cumque!
    </p>
</details>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab nemo, quae, explicabo doloribus quos corporis omnis error ipsum ex quia voluptatibus consectetur neque natus quisquam nulla sunt non impedit ducimus.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Beatae sequi quam sit magni neque repellat, natus debitis necessitatibus a, maxime placeat doloribus alias nobis perferendis non excepturi tenetur, quos porro! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut magnam fugit tempora deserunt sint vel aperiam nemo reiciendis perferendis! Exercitationem culpa velit labore doloribus et quae at commodi porro dicta? Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam consectetur rerum, unde minima reprehenderit laboriosam fugiat deserunt animi? Tenetur sit nisi magnam quis dolorem eius recusandae possimus distinctio, error incidunt! Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia dolor suscipit laudantium ipsam iste ipsa nobis obcaecati impedit sequi exercitationem, quasi rerum repellat omnis, aliquam accusantium at provident eum recusandae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur eos asperiores est ea aliquam aut quasi at ratione similique suscipit laboriosam cupiditate, esse nesciunt, aperiam odio numquam quae soluta cumque!