Help

Context-bar with back link and search

Usage: tbd.

<!-- START context-bar component -->
<div class="context-bar">
  <div class="context-bar__navigation">
  <div class="grid-container grid-12">
    <div class="grid__column-12">
      <div class="context-bar__search">
        <!-- START search component -->
<div class="form-item form-item--plain">
  <label for="search_field" class="hide-element">Search field:</label>
    <div class="form-item__search_field">
      <input type="search" id="search_field" placeholder="Search for qui placeat">
      <input type="submit" name="search_submit" value="Submit" title="Submit">
    </div>
</div>
<!-- END search component -->

      </div>
      <div class="context-bar__back">
        <a class="context-bar__back-link icon--chevron-left-light icon-inline--left" href="/index.html">Quaerat nostrum</a>
      </div>
      <a href="/pages/nojs.html" class="context-bar-help icon--help-circle-light icon-inline--left">Help</a>
      <div class="context-bar__toggles">
      </div>
    </div>
  </div>
  </div>
</div>
<!-- END context-bar component -->

CSS basic elements

The purpose of this HTML is to help determine which default settings are used within the CSS, and to make sure all possible HTML elements are included when designing a site.


Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Lorem ipsum strong sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Highlighted paragraph consectetuer adipiscing elit. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

List Item 1

List Item 2

List Item 3

Highlighted paragraph consectetuer adipiscing elit. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.


Truncated text

You can limit text to one line and add an ellipsis by adding

class="truncate"
to a block-level element.

Truncate applied to a div

A long piece of text that has been truncated using the truncate class. A long piece of text that has been truncated using the truncate class. A long piece of text that has been truncated using the truncate class. A long piece of text that has been truncated using the truncate class.
<!-- START truncate-text-div component -->
<div class="truncate">A long piece of text that has been truncated using the truncate class. A long piece of text that has been truncated using the truncate class. A long piece of text that has been truncated using the truncate class. A long piece of text that has been truncated using the truncate class.</div>
<!-- END truncate-text-div component -->

Truncate applied to a paragraph

A long piece of text that has been truncated using the truncate class. A long piece of text that has been truncated using the truncate class. A long piece of text that has been truncated using the truncate class. A long piece of text that has been truncated using the truncate class.


List types


Definition list

Definition list title 1
Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
Definition list title 2
Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonumm.
Definition list title 3
Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Ordered list

  1. Molestias magni molestias aperiam et dolorem ad accusamus veniam reiciendis vel odit molestiae cum est voluptatum libero voluptas fugit aut
  2. Rem enim est accusantium vitae inventore praesentium quod qui minus aspernatur similique voluptatibus quasi quo facilis eos soluta similique reprehenderit
    1. Consequatur qui architecto error suscipit consequatur quia et cupiditate ut qui praesentium quia aut ea reprehenderit consequatur cupiditate quia iure
    2. Autem modi mollitia eum fuga occaecati enim reiciendis laboriosam optio commodi magnam nam minima ipsa pariatur vel optio totam ab
    3. Cum molestiae nemo non alias
  3. Quibusdam modi quis adipisci non debitis quos et aut cupiditate qui qui numquam vitae maiores sunt quisquam laudantium in incidunt

Unordered list

  • Veniam repellat rerum ducimus aspernatur ea voluptatem quo alias ducimus quo id esse similique et voluptas quia nulla tenetur velit quis totam quos in quisquam
  • Voluptatem rerum facilis est sint tenetur exercitationem sunt quisquam esse sunt natus eius fuga ullam
  • Sint facere sint est ut nesciunt molestias qui qui expedita quos deserunt qui ipsa et

Newspaper style vertically ordered list

  • Applying for courses
  • Agriculture, horticulture and veterinary studies
  • Area studies, languages and literature
  • Arts and crafts
  • Business and management
  • Construction
  • Education
  • Engineering and production
  • Environment
  • Family and personal care services
  • Food, leisure and hospitality
  • Humanities
  • Information technology
  • Librarianship
  • Media studies
  • Medicine and health studies
  • Science
  • Social sciences
  • Teaching
  • Transport

Tables

Labore aut Voluptas facilis Laudantium laborum quidem aut optio ut Temporibusquoset Numquam quasi Account status Actions
Eaque voluptas Beatae ut est Sed in ullam Eveniet nesciunt fugiat
Delete
Totam aut Placeat accusamus delectus Cumque aut labore Nesciunt explicabo
Delete
In officiis Facere minus quibusdam Quo occaecati voluptatem Iusto eaque numquam
Delete
Voluptas animi Tempora harum ratione Quo beatae laboriosam Dolorem quia repellat
Delete
Est repudiandae Quod dolores qui Corrupti enim adipisci Reiciendis dolorem
Delete

Misc - abbr, acronym, pre, code, sub, sup, etc.

Lorem superscript dolor subscript amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. cite. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE

Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
- Blockquote

Media

Exercitationem beatae rerum pariatur et ut non rem commodi non facere. corporis laboriosam nihil aliquam autem. cupiditate fuga et est rerum quas culpa atque aliquam magnam. odio aut dolor et soluta officia perferendis ea qui nihil reiciendis maiores quo vel. eveniet sequi et architecto impedit ipsa ducimus. omnis sit assumenda corporis modi laboriosam totam impedit quasi voluptatem sed ut. omnis ullam corrupti eaque porro vel est dolorem tempore enim

Illum accusamus labore et consequatur maxime sunt ex et est qui. consequatur eos iure adipisci facere est eveniet quia commodi ab modi quo cum voluptas. cupiditate modi cupiditate repudiandae quis beatae illum quod et repudiandae. expedita dignissimos quia eveniet esse itaque et velit sapiente sed Explicabo quis vero ratione assumenda in voluptates corporis est voluptatibus libero quasi. nemo ut in laboriosam vero. in quos ipsa veritatis. maxime eos nesciunt fuga expedita maxime praesentium repellendus ipsum

Eum rerum vero corporis maxime totam asperiores ea molestiae. accusamus quia nobis nisi totam incidunt atque inventore labore minus libero corrupti. qui non illum voluptate distinctioInventore rerum nesciunt ullam magni voluptas quia deleniti ut error aliquid eligendi. minus et eos et in amet ipsam. qui modi voluptatum maiores quia quisquam quo quae similique quo maiores quod quo architecto nisi. fugiat cupiditate totam autem. omnis sit repellendus non. nam est eos ut quam officiis in incidunt et iusto sit


Fieldsets, legends, and form elements

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.

Form elements

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.

Quam nulla ea temporibus natus sed autem impedit voluptate fugit sed voluptatem est.
Quam eos recusandae et voluptatum quis et
Optio ut illum sed
Et repellendus sit distinctio quod repellat.
Radio buttons (inline):
Radio buttons (block):
Checkboxes (inline):
Checkboxes (block):
Address:

Pagination