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">Search field:</label>
    <div class="form-item__search_field">
      <input type="search" id="search_field" placeholder="Search for est eligendi" />
      <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">Soluta voluptatibus</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 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. List item 1
  2. List item 2
  3. List item 3

Unordered list

  • List item 1
  • List item 2
    • List item 1
    • List item 2
    • List item 3
  • List item 3

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

Aut officia Facilis accusamus Amet dolorum sint quis quo illo Temporibusquoset Non voluptas Actions
Eum et Non at excepturi Est voluptatem impedit Occaecati aspernatur consequuntur
Delete
Quam porro Voluptatem suscipit autem Doloribus placeat rem Qui tempore
Delete
Id repellendus Molestiae sed explicabo Est et praesentium Incidunt voluptatum doloremque
Delete
Suscipit cum Aut hic et Earum ad voluptatem Corrupti neque rerum
Delete
Expedita et Nulla repellat exercitationem Rem quia sed Recusandae vel
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

Ad ipsam quis velit nobis natus earum facilis quasi. hic iusto sint ratione. saepe ea vel eveniet debitis sunt. quae optio voluptatem quia. dignissimos sit deleniti molestiae nesciunt odio corrupti dolorum culpa quo quia modi vel placeat. repudiandae rerum qui voluptatem quia impedit rem

Ut blanditiis adipisci sit sapiente incidunt animi. et molestiae tempora sit a aut error possimus quis vero voluptas aspernatur sed. eius ut reiciendis quia maiores dignissimos natus dignissimos voluptate nemo repellendus sed est officia. aut illum eius dicta. illum nam in omnis Rem voluptas sint temporibus mollitia qui aut nisi dolorem necessitatibus omnis. quibusdam eos quia omnis atque. nisi distinctio similique suscipit possimus optio expedita aut velit at. eos aperiam illo iste. laboriosam consectetur nihil consequatur est repellendus numquam fugit. consequatur minima quo deserunt excepturi officiis

Voluptates quia dolorem nam tenetur hic ut quam ducimus repellendus et. dolores ab nam minima earum voluptas voluptatem quisquam ipsa aut omnis eaque voluptatem omnis. dolores adipisci quisquam in qui eveniet. id voluptatem odio et doloribus deserunt rerum temporibus alias. maiores fuga excepturi laborumNostrum molestias aut et dolor fuga ea dicta consequatur sequi eveniet commodi illum. quia dolores et sequi asperiores saepe magni et aut et voluptate. at corrupti voluptatem odit mollitia dolores iusto quos. ratione quo ullam commodi omnis earum beatae enim aut suscipit est velit. recusandae at dolorem sed voluptatibus perferendis. hic ipsum esse itaque quia molestias magnam excepturi doloremque quasi labore nobis et. enim magni eaque quia quis error voluptatibus nisi quidem voluptatibus asperiores voluptas quia placeat


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.

Fuga sunt quae corporis sint pariatur repellendus minus eos ipsa quas
Tempore quas molestiae modi iste ut dolor et voluptatibus
Porro repellat dolores sed
Radio buttons (inline):
Radio buttons (block):
Checkboxes (inline):
Checkboxes (block):

Address:

Pagination