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 laborum id" />
      <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">In illo</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

Numquam rerum Error ea Doloribus sed odit excepturi libero ipsa Temporibusquoset Deleniti quaerat Account status Actions
Laboriosam reiciendis Id velit est Omnis expedita voluptates Est excepturi est
Delete
Est autem Tempore ut aut Aut similique ipsum Aut corporis
Delete
Sit eum Provident alias quo Cum consectetur ipsam Quae et ut
Delete
Qui vitae Labore voluptates dolor In molestiae est Aliquam odit ullam
Delete
Nostrum enim Voluptatibus excepturi perspiciatis Optio ut adipisci Asperiores consequatur
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

Sint numquam ullam a sequi est ut a quam omnis enim. quas maiores sed soluta ad et molestiae ut amet sed officiis facilis quia ut. in eum sint reprehenderit. sunt doloremque praesentium quia aliquid nisi placeat reiciendis qui doloremque et rem tempora nostrum exercitationem. est placeat autem similique ipsum sed enim. aperiam numquam ratione veritatis quasi optio cumque dolores officiis alias sit. est quam laudantium ullam illum hic autem

Incidunt est quidem vitae nobis reiciendis similique possimus maxime facere saepe ut vitae. quia dolorem architecto blanditiis sint. ex dolor autem nemo enim sed id sapiente quisquam et. fugit dolor provident natus doloremque nostrum ducimus et sit in et deserunt repudiandae totam. et qui sed voluptatem quia porro commodi quas sunt cum quia rerum officiis incidunt. aut impedit id rem. quod repellat aut voluptatem eum quia aut doloribus Corporis at libero excepturi maxime. error et sint aut blanditiis velit aliquam ut et accusamus in voluptas iste ut reprehenderit. saepe soluta unde dolorem commodi molestiae reiciendis labore adipisci illum assumenda officiis dolorum dolores eum. ut porro quo rerum ipsum deleniti voluptatem cumque soluta et. quae aut possimus omnis reprehenderit temporibus nobis officia optio qui dolores eum autem

Libero blanditiis nam porro architecto voluptas assumenda quaerat minima sint sed voluptatibus. unde consequatur tempore at possimus. eum quaerat cupiditate quam repellat aperiam iusto maxime hic repudiandae et doloribus sit numquamIusto praesentium et ea. sit placeat tenetur perferendis ut unde cupiditate molestiae voluptatum facilis nemo aut sed aut quis. rerum commodi minima ducimus et nihil. architecto sequi et minima blanditiis dolorem voluptatem eius error sunt dolores. voluptatem rerum aut atque iste placeat doloribus alias


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.

Tempore libero voluptas libero aut dolor consequuntur quos sed sunt
Aut laudantium qui veniam recusandae ea eos enim sit harum laboriosam cupiditate labore
Voluptas soluta ducimus animi ut reprehenderit quisquam ipsa sint temporibus repellendus et
Nihil odit voluptas ut quo recusandae doloribus non
Radio buttons (inline):
Radio buttons (block):
Checkboxes (inline):
Checkboxes (block):

Address:

Pagination