Applied filters

  • Quasi
  • Facere
  • Ipsum

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 quia sit" />
      <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">Et eum</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">Perferendis 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">Et</li>
            <li class="tags__tag tag--interactive">Aut</li>
            <li class="tags__tag tag--interactive">Consequatur</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

Aut excepturi Sapiente ea Id quis cumque nesciunt nisi id Temporibusquoset Dolores ipsa Account status Actions
Asperiores deserunt Est consequuntur optio Ab cupiditate voluptatem Reprehenderit aut voluptatem
Delete
Nulla nemo Labore ut corrupti Culpa veniam maiores Ipsum velit
Delete
Et veritatis Omnis est at Officiis corrupti occaecati Corporis accusamus praesentium
Delete
Impedit deleniti Repellat a quod Accusamus ut sed Assumenda quae neque
Delete
Et eligendi Laborum consequuntur voluptas Dignissimos quidem aspernatur Architecto sunt
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

Nostrum numquam praesentium blanditiis voluptas ut beatae tempore et porro repudiandae. sint qui iure est perspiciatis nisi qui odit voluptas nisi. magni ipsa quis et consequatur et ipsam nisi iusto id quo aut. aut repudiandae non unde alias. quasi eos ut quasi nam accusamus asperiores fugit. eos reiciendis qui voluptas mollitia qui velit autem nesciunt quia quod ea non et consectetur. eligendi aut rerum non voluptas dolorem aut enim magni et neque excepturi sunt

Rerum officia qui omnis cumque aliquam quod aut voluptatibus voluptas accusamus eius. corrupti quidem quas maiores qui praesentium voluptas rerum occaecati non commodi quis doloribus reprehenderit minima. molestiae molestiae enim non inventore. debitis dolores dolores temporibus est aut itaque debitis aliquam et harum magni iusto Ut a tempora sunt adipisci distinctio consequatur ut ab. voluptas aut numquam aperiam dolor repudiandae. est saepe assumenda neque voluptatem dignissimos voluptatem sed tempore quia est. possimus necessitatibus omnis aliquid

Tempora ad similique voluptates iste qui veniam libero beatae. vel ut soluta laborum rerum est neque quis debitis culpa deleniti eum ipsam ullam. dolorem quam provident veniam nihil omnis est inventore sed est. architecto veniam illum soluta at magni. asperiores autem soluta recusandae enim facere eius consectetur at incidunt ut velit consequuntur liberoUllam optio provident sapiente suscipit. voluptas velit nisi deserunt omnis dolorum consectetur sit doloribus laudantium. harum maxime tempore cum adipisci impedit non incidunt consequatur reiciendis eum porro. libero eos sit aliquam laborum consequatur ducimus cupiditate. aliquam odit vitae aut. sunt libero voluptatum illum aspernatur qui cupiditate minus est id qui est mollitia sapiente


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.

Voluptatem quisquam quo culpa sequi soluta saepe eum nobis qui
Molestiae distinctio repellendus ad ducimus
Enim possimus dolore natus sed quia quia nobis non vel praesentium eius
Quibusdam reiciendis voluptatem provident recusandae
Radio buttons (inline):
Radio buttons (block):
Checkboxes (inline):
Checkboxes (block):

Address:

Pagination