Applied filters

  • Odio
  • Aliquam
  • Earum

Context-bar with back link and search with tabs

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 doloremque laborum" />
      <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">Sit odio</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">
        <a href="" class="icon--filter-light icon-inline--left toggles__tab toggle-button--active" data-toggle-target=".context-bar__panels--filters">Et adipisci</a>
      </div>
    </div>
  </div>
  </div>
  <div class="context-bar__panels context-bar__panels--default context-bar__panels--filters">
    <div class="grid-container grid-12">
      <div class="grid__column-12">
        <div class="context-bar__panel context-bar__panel--filters">
          <h3 class="tags__title context-bar__panel__title">Applied filters</h3>
          <ul class="tags">
            <li class="tags__tag tag--interactive">Natus</li>
            <li class="tags__tag tag--interactive">Accusamus</li>
            <li class="tags__tag tag--interactive">Inventore</li>
          </ul>
        </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

Corrupti blanditiis Consectetur distinctio Reprehenderit qui atque error repellat recusandae Temporibusquoset Voluptatibus velit Actions
Atque et Sed temporibus ut Ut blanditiis non Illo aut inventore
Delete
Dolores placeat Suscipit hic aut Soluta est delectus Consectetur incidunt
Delete
Expedita illo Incidunt repudiandae rem Nobis totam eos Quia architecto ullam
Delete
Doloribus error Ipsa deserunt placeat Velit sit qui Voluptates quo qui
Delete
Aspernatur facilis Mollitia ipsa sequi Fugit quasi corporis Earum iste
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

Laborum culpa aliquid atque consequatur natus aspernatur. voluptatem aliquid magnam sint. voluptas eius laborum rerum ut reiciendis officiis nihil. culpa dolores laudantium id nihil

Repellendus maxime est incidunt sed error fugiat ut amet et dolorem. eos delectus est molestiae odio porro velit non dolores odit corrupti placeat. ducimus occaecati qui dignissimos rerum ducimus sequi sed libero. repellat et molestiae atque quo tempora odio at molestiae eos. aut enim vero eveniet Quis iusto veniam dolor et molestiae aut. qui autem rerum velit neque corporis et a ut sed quas voluptas velit. et facilis sint blanditiis doloremque. excepturi possimus rerum provident quod voluptas impedit est quisquam deleniti sed ut pariatur. quo dolor sit accusamus animi et

Est optio ut impedit occaecati dignissimos facere. ullam aut asperiores reiciendis reprehenderit non itaque et deserunt pariatur. placeat explicabo itaque quo officiis odio aliquid autem rerum id possimus. laudantium aspernatur sed nihil laborum omnis sequi veritatis aut. nihil quasi officiis reiciendis dolores quis laborum eius soluta. sequi corrupti sit praesentium ut culpa quod reiciendis. debitis eos accusamus itaque accusantium nostrum inventore et aspernatur aspernatur ea ab fugaAut dolorem iste ex totam culpa fugit voluptatem dolore impedit sapiente deleniti. praesentium et eum quibusdam labore cupiditate. nemo numquam nobis et consequatur amet similique maxime. totam voluptatem reprehenderit sit ut. consequuntur voluptate vero est. ut et qui est recusandae voluptatem blanditiis


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.

Dolore qui unde necessitatibus voluptates excepturi voluptatem at hic et aut eligendi rerum
Qui voluptas repudiandae omnis aut omnis culpa nisi non maiores et corporis autem et
Aperiam ab minus incidunt enim incidunt possimus excepturi nobis in ullam atque deleniti
Radio buttons (inline):
Radio buttons (block):
Checkboxes (inline):
Checkboxes (block):

Address:

Pagination