Applied filters

  • Dolores
  • Doloribus
  • Quod

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 illo saepe">
      <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">Excepturi quibusdam</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">Quis numquam</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">Aperiam</li>
            <li class="tags__tag tag--interactive">Rerum</li>
            <li class="tags__tag tag--interactive">Alias</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.


Truncated text

You can limit text to one line and add an ellipsis by adding

class="truncate"
to a block-level element.

Truncate applied to a div

A long piece of text that has been truncated using the truncate class. A long piece of text that has been truncated using the truncate class. A long piece of text that has been truncated using the truncate class. A long piece of text that has been truncated using the truncate class.
<!-- START truncate-text-div component -->
<div class="truncate">A long piece of text that has been truncated using the truncate class. A long piece of text that has been truncated using the truncate class. A long piece of text that has been truncated using the truncate class. A long piece of text that has been truncated using the truncate class.</div>
<!-- END truncate-text-div component -->

Truncate applied to a paragraph

A long piece of text that has been truncated using the truncate class. A long piece of text that has been truncated using the truncate class. A long piece of text that has been truncated using the truncate class. A long piece of text that has been truncated using the truncate class.


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. Deserunt eos eius incidunt dolore ipsum eius est harum consequatur minus error molestias maxime sint ut magni debitis saepe repudiandae
  2. Voluptatibus exercitationem necessitatibus eius nihil tenetur deserunt asperiores ut est cum ipsum natus explicabo ipsa est nulla in aperiam non
    1. Error nemo rerum asperiores dolor eius iure sapiente nihil pariatur consequatur unde ullam aut quo et pariatur mollitia maiores alias
    2. Qui voluptatem molestiae atque quia ducimus quia est modi suscipit explicabo quo est tempora facilis quam enim qui atque tenetur
    3. Natus occaecati in qui omnis
  3. At voluptates illo qui et perferendis molestias eos iure ullam officiis tenetur non aut aut repellendus hic repudiandae dolorem qui

Unordered list

  • Asperiores sed autem atque hic ab libero vel est rem voluptatum est aut nam at delectus possimus quidem et culpa sed ipsam asperiores placeat error
  • Enim voluptate at velit voluptatem sapiente facilis perferendis aut pariatur quod rerum voluptatem corrupti qui
  • Quam dignissimos voluptate laudantium fuga iste veritatis et sit eos laborum impedit eos praesentium provident

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

Vel aut Quos eum Minima voluptates aut perspiciatis et quasi Temporibusquoset A numquam Account status Actions
Quas vero Omnis et sunt Autem officiis amet Nam eum ut
Delete
Numquam vitae Molestias vel qui Error ut vel Quod veniam
Delete
Repudiandae saepe Minus et nam Id optio labore Cumque ut sed
Delete
Autem et Sit sint minus Sit qui aliquam Dignissimos ratione numquam
Delete
Earum tenetur Voluptatem rerum et Temporibus rem quas Est magni
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

Excepturi nam ab modi voluptas quasi. earum voluptas quo vero animi. commodi qui molestiae perferendis tenetur qui id. ipsum quidem est suscipit rerum eum eos et mollitia quod sit assumenda impedit. numquam maiores et praesentium voluptatibus non nesciunt voluptas et praesentium ut sint

Cumque sed neque aut temporibus amet. iusto debitis accusamus et saepe. distinctio nobis corrupti rerum molestiae unde voluptatem architecto Et nesciunt impedit tempore nobis repudiandae ut voluptates fuga dolorem. nesciunt beatae consequatur consequatur est in non sunt et quia deserunt iusto eligendi omnis. nobis enim ducimus molestiae est autem aut consequatur aut. voluptatem aliquam rerum expedita eos sit laboriosam sit repudiandae consequatur dolorem velit occaecati repellendus voluptas. est facilis sunt et est voluptatem alias pariatur ad qui officia velit consequatur molestiae

Libero numquam consectetur voluptatem molestiae eveniet impedit officiis recusandae quod amet eveniet autem. minus quaerat dolor provident qui. atque eius odit dicta iste voluptatum eligendi ut eius maxime aliquam a laudantium. explicabo laudantium quia commodi dignissimos suscipit ratione sit aliquid porro. et cumque eum in beatae quo maxime voluptas error autem dolorem laboriosam in eos similique. repellendus eum quisquam pariaturVitae error saepe error nihil eum pariatur id sunt animi enim. et alias qui sit et culpa ad perspiciatis quisquam velit. nobis autem dolores distinctio consequatur maiores occaecati consectetur at illo vero. sed voluptatem ut in. iste minima et velit illum enim dicta velit a aliquid. quaerat eaque aut et qui aut nisi


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.

Et ut consequuntur qui magnam nesciunt.
Laboriosam officia aut quidem nemo ex ab voluptatibus et quam qui minus
Architecto voluptatem velit sunt fuga vitae sunt aut accusantium harum excepturi et quis
Ut velit aut quod adipisci error rerum rerum numquam quia.
Radio buttons (inline):
Radio buttons (block):
Checkboxes (inline):
Checkboxes (block):
Address:

Pagination