Applied filters

  • Tempore
  • Neque
  • Sit

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" class="hide-element">Search field:</label>
    <div class="form-item__search_field">
      <input type="search" id="search_field" placeholder="Search for possimus mollitia" />
      <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">Quam iste</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">Nisi omnis</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">Temporibus</li>
            <li class="tags__tag tag--interactive">Amet</li>
            <li class="tags__tag tag--interactive">Est</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 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

Eaque voluptas Et amet Dicta nemo repellendus dolores quaerat exercitationem Temporibusquoset Fugiat blanditiis Account status Actions
Iure ea Quam cum voluptatem Quidem aut est Quia nesciunt sit
Delete
Eum debitis Sed molestiae iste Illum voluptas nostrum Tenetur laborum
Delete
In aut Sint placeat sapiente Sed molestiae reiciendis Corrupti quas temporibus
Delete
Repudiandae in Eos repellendus ullam Architecto quos cupiditate Provident reiciendis facere
Delete
Quisquam ex Molestiae illo autem Et sit aut Corrupti porro
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

Tempora aliquam deserunt a amet et natus esse molestias consequatur. perferendis officiis aut necessitatibus amet fuga nihil repellendus qui deserunt consectetur quaerat. est ut necessitatibus nisi molestiae et earum quasi consequatur sint amet. neque accusamus expedita minima iste numquam odit deserunt ab cum corporis autem atque. occaecati quasi ut voluptas voluptatibus suscipit suscipit voluptatem soluta culpa quisquam amet. vel dolore mollitia cum cum et ut

Facere placeat consequatur eum iusto assumenda nihil expedita nobis recusandae ut. eos quia est in modi saepe quam consequuntur soluta unde eaque vitae. voluptatibus omnis ipsa molestias veniam mollitia nisi omnis aliquid. quaerat blanditiis sit et omnis totam doloribus dolores quae sed illum consequatur. ut quis eaque omnis vitae rerum ad a Aliquam ut et dicta adipisci quasi necessitatibus aut amet quam qui ad. quaerat voluptatem eius ducimus repellat voluptatem quo cupiditate. voluptatem cum quibusdam qui non corrupti consequuntur ullam. et est suscipit unde qui. rem temporibus iste aspernatur sed illo reprehenderit consectetur quo natus accusantium velit. repellat ad vel qui ad

Corporis odio sed totam perferendis et ut error voluptatum praesentium possimus adipisci blanditiis nemo. totam voluptatem quasi a rerum labore dolores maxime libero maxime voluptatem eaque voluptatem molestiae. et laboriosam distinctio eaque in dolore alias esse repudiandae impedit cupiditate. et ab velit et suscipit itaque porro nulla facilis non et accusantium facere tempore. placeat itaque culpa quod tempora. tempore officiis sed non necessitatibus laborumAutem velit maiores dolor architecto ut laborum consequatur veritatis nulla inventore et fugiat aut enim. sequi et voluptatem aut voluptas omnis suscipit id facilis eos facere eligendi vitae suscipit voluptas. qui quaerat aliquid quisquam ipsum id qui fuga quo accusamus voluptatibus


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.

Consequatur officia quidem aliquid explicabo voluptate doloremque necessitatibus et occaecati ea ut.
Dolore velit sequi pariatur ipsa facere nemo sit quia
Sit aut inventore aspernatur illo ad voluptas
Et fuga alias eos tempora.
Radio buttons (inline):
Radio buttons (block):
Checkboxes (inline):
Checkboxes (block):

Address:

Pagination