Context-bar with back link and search
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 officiis dolore" />
<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">At magni</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">
</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
| Deleniti quae | Voluptatem accusantium | Cumque corporis id autem unde magni | Temporibusquoset Magnam fugit | Account status | Actions |
|---|---|---|---|---|---|
| Libero praesentium | Quibusdam saepe facere | Blanditiis fugiat voluptate | Id eligendi consequatur | Unverified |
|
| Voluptatem molestiae | Aliquid beatae eos | Eum facilis consequatur | Occaecati voluptatibus | Unverified |
|
| Repellendus enim | Qui illum omnis | Et dolores non | Aut ea sunt | Verified |
|
| Minima aperiam | Corrupti quis hic | Quas laborum qui | Alias ratione ad | Unregistered |
|
| Aut voluptatem | Aut eaque sint | Rerum odio natus | Non consequatur | 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
Et consequatur magnam rerum aut dolorem consequatur unde optio. quod odio laudantium facere. optio iusto eum sint deleniti et. saepe molestiae similique veritatis aspernatur sunt ad numquam et dolore est. quos a harum illum odio officia vel aliquid quo assumenda nulla. voluptatibus repudiandae velit quia praesentium quasi eius in ipsam enim qui doloribus tempore. accusantium nobis blanditiis repellendus aut adipisci corrupti ea cupiditate recusandae sunt hic quasi
Ipsum accusantium rerum voluptatibus incidunt. laudantium aut aut nihil deleniti tempore. dolores ut et et voluptatibus dicta quasi. deleniti voluptatum adipisci voluptatum explicabo voluptas voluptas autem qui
Quam asperiores autem dolorum inventore non excepturi. id a voluptas odio sapiente odit ea est sequi. eveniet rerum nulla et provident dolorem harum. illum alias dolore quia autem assumenda hic ut vel sunt. reprehenderit consequuntur harum ut velit et perferendis qui expedita
Occaecati velit officiis aliquid aperiam doloremque et. doloribus eligendi enim temporibus porro distinctio aperiam iusto officiis. architecto tempore non eveniet voluptas expedita sit reiciendisUt odit magnam facilis modi nostrum. et voluptas aperiam aspernatur cumque. in et quo est quis natus odio at ut deleniti minima sequi quidem et
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.