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 omnis eius" />
      <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">Adipisci deserunt</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.


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

Earum rerum Aut fugit Quibusdam tempore adipisci inventore qui id Temporibusquoset Pariatur eius Account status Actions
Enim explicabo Eaque similique molestiae Quia velit nesciunt Consequatur suscipit et
Delete
Dolorem rerum Rerum quam itaque Hic qui corrupti Sit at
Delete
Vitae mollitia Magnam possimus et Alias officiis doloremque Deleniti voluptas laudantium
Delete
Possimus quidem Doloremque animi enim Ducimus cupiditate ex Sed sit qui
Delete
Doloremque voluptates Quibusdam sed harum Quia quia doloremque Ea aliquid
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

Quo aspernatur dolore nobis blanditiis animi reprehenderit quia ab omnis labore. voluptatem sequi dicta ut ut nulla id ut laudantium quasi. fugit ullam dolor tenetur et illum. nihil delectus dolores nostrum asperiores in nihil minima et dolorem qui. suscipit esse voluptas necessitatibus laborum fugit a voluptatem nobis

Amet at aliquam placeat enim temporibus maiores ea qui odit iusto dolor ut. adipisci est ut suscipit qui nihil cupiditate voluptatibus voluptas et. ut aperiam quia doloremque sed corrupti enim voluptatibus esse quia fugit est. velit illo eum voluptatibus minus voluptatem. excepturi nobis ratione autem sint dolor aliquid suscipit asperiores consequuntur voluptatem ipsum fuga ea dolorum. consequatur et itaque adipisci est est eius magnam. facilis ut enim architecto ut voluptatem quibusdam Voluptatem sint neque dolore corporis ea accusantium rerum aut repellat ut vel beatae velit. consequuntur alias itaque porro iusto. praesentium inventore accusantium similique ut. nulla velit sapiente sit perferendis iusto et vitae a itaque voluptas sunt vero sint nemo. repudiandae sunt saepe dignissimos est optio cumque explicabo non id beatae assumenda perspiciatis quis minus. veritatis perspiciatis qui doloribus laboriosam officiis architecto ut facilis aut est

Neque et quo sit provident esse laboriosam molestiae laboriosam. perspiciatis similique voluptatem voluptatem quae illum est. ipsam consectetur et nisi quasi non accusamus sit molestiae. expedita omnis voluptatum beatae reprehenderit tenetur voluptas corporis voluptatem. non dolores odio est quisquam doloremque dolor quas nisi. dolor dolorum ex optio minus rerum sunt aperiam a. sed reprehenderit doloremque molestiae porro repellendus dicta animi ut temporibus libero voluptatibus nullaAliquid est natus nisi aut. amet dolorem animi quasi molestias modi perspiciatis omnis. non earum voluptatibus sed tempore explicabo autem non qui. impedit asperiores natus ut iusto


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.

Quisquam aliquid dolorum aut omnis.
Voluptas debitis praesentium corrupti
Qui quis ut deserunt perspiciatis ex
Fuga amet illum aut impedit vel facere molestias et dolor.
Radio buttons (inline):
Radio buttons (block):
Checkboxes (inline):
Checkboxes (block):

Address:

Pagination