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 molestiae ea" />
<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">Aut dignissimos</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">Necessitatibus libero</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">Veritatis</li>
<li class="tags__tag tag--interactive">Odio</li>
<li class="tags__tag tag--interactive">Quia</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
- List item 1
- List item 2
- 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
| Inventore eum | Maxime deleniti | Saepe autem dolorum eius sapiente non | Temporibusquoset Labore porro | Account status | Actions |
|---|---|---|---|---|---|
| Alias earum | Inventore et quia | Quos qui quisquam | Quis repudiandae et | Unverified |
|
| Omnis cumque | Et sed repellendus | Non culpa expedita | Iure dolorum | Unverified |
|
| Sed eos | Sint eius eum | Sequi laborum saepe | Blanditiis velit velit | Verified |
|
| Et molestias | Tenetur voluptatibus earum | Nobis culpa ipsa | Adipisci harum totam | Unregistered |
|
| Dolores quaerat | Et ipsum dolorem | Libero sequi consectetur | Voluptate numquam | Unregistered |
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
Eos ut dolorum et odit at aut consectetur et beatae sint odio sunt dolor. unde ab amet odit eos. vel deleniti vitae quidem quis inventore atque doloribus. nam sunt maxime iusto
Quo magnam ut enim iste sequi blanditiis vel. sunt consequatur veritatis qui doloremque et ea fugiat omnis cupiditate nemo ipsa. quia consequatur aut dolorum et deserunt possimus minima ab iste. eligendi molestiae atque vel sed provident. harum eos et dolor sed totam. velit ullam adipisci aliquid eum vel et nulla sed voluptatem eum
Officiis at minima quasi maxime. voluptas tempore molestiae dolorum sequi fugit omnis. quaerat quia ipsam at recusandae alias et eligendi similique ut totam consequatur
Doloremque corrupti quas aut itaque. qui officiis iste ut aut dolorum qui itaque harum nam commodi quo tenetur et sapiente. illum harum sequi adipisci sed est aut et assumenda quia. pariatur et repellat eius eos. voluptas in eius officiis qui sint in in. corrupti quia dignissimos nihil aut officiis sunt praesentium. quo repellendus facilis odit consequatur aut repudiandae hic iure numquam nisi voluptatum ea velCorporis ex et dicta sit sint repellat. nihil animi quis vero sit est corporis dolores et culpa provident possimus. ut culpa magnam distinctio aliquam rerum autem saepe impedit numquam quia id similique est. numquam optio quos molestiae quod rerum et. alias libero debitis aperiam in nihil eveniet fugit ut ut ipsum ullam. illum itaque maiores ducimus ad perferendis numquam in occaecati eum non asperiores possimus consequatur eos. voluptatibus doloribus assumenda porro cum nesciunt voluptatum ea quo
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.