HTML elements & utility classes

These examples styles target plan HTML elements to make it as easy as possible to use them in any POSH site site without the need to add custom CSS classes.

In addition, a number of common utility classes are provided to help express more detailed designs.

HTML elements

Headings

<h1>h1. First level header</h1>
<h2>h2. Second level header</h2>
<h3>h3. Third level header</h3>
<h4>h4. Fourth level header</h4>

h1. First level header

h2. Second level header

h3. Third level header

h4. Fourth level header

Sections and paragraphs

Wrapping elements in a <section> applies the line-length constraint and centers content in the page.

Paragraphs <p> have been given some spacing.

A horizontal rule <hr> can be used to add some subtle visual separation.

Small-print or side comments can be added using the <small> element as usual.

Links and buttons

Inline anchor tags appear like this without any additional css.

Button styles are available to use direclty on button elements or by adding a class to an anchor element.

<button>Button</button>
<button disabled>Disabled button</button>

Blockquotes

<blockquote>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque perspiciatis placeat sit deserunt suscipit quisquam eaque hic dolorum libero magnam! Ducimus quis adipisci amet mollitia atque dicta iste aut ratione?
</blockquote>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque perspiciatis placeat sit deserunt suscipit quisquam eaque hic dolorum libero magnam! Ducimus quis adipisci amet mollitia atque dicta iste aut ratione?

Titles in blockquotes

Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque perspiciatis placeat sit deserunt suscipit quisquam eaque hic dolorum libero magnam! Ducimus quis adipisci amet mollitia atque dicta iste aut ratione?

Lists

Ordered and unordered lists get a little breathing room. We also style the number or bullet with a tiny bit of color variation.

Ordered lists

<ol>
  <li>Ordered lists</li>
  <li>Show numbered items </li>
  <li>With this formatting</li>
</ol>

Ordered lists
Show numbered items
With this formatting

Unordered lists

<ul>
  <li>Unordered lists</li>
  <li>Show bullet items </li>
  <li>With this formatting</li>
</ul>

Unordered lists
Show bullet items
With this formatting

Description lists

<dl>
  <dt>Description term</dt><dd>Description data</dd>
  <dt>Description term</dt><dd>Description data</dd>
  <dt>Description term</dt><dd>Description data</dd>
</dl>

Description term: Description data
Description term: Description data
Description term: Description data

Syntax highlighting

Provided by highlight.js, this can be used either during the build (ideally), or client-side for simplicity in demos and examples. A custom palatte is included in the CSS provided from this site.

Add the provided tags to the <head> of your HTML.

The result will style your code blocks like this:

/*
 example from elsewhere
*/
import type { Context } from "@netlify/edge-functions";

export default async (request: Request, context: Context) => {
  let index = 0
  const encoder = new TextEncoder();
  const body = new ReadableStream({
    start(controller) {
      setInterval(() => {
        controller.enqueue(encoder.encode());
      }, 1000);
    },
  });
  return new Response(body, {
    headers: {
      "Content-Type": "text/event-stream",
    },
  });
};

Form elements

Using input elements nested inside labels for implicit association.

<form>

  <!-- Text inputs -->
  <label>Text input label
    <input type="text" placeholder="text input">
  </label>
  
  <!-- Password inputs -->
  <label>Password input label
    <input type="password" placeholder="password input">
  </label>

  <!-- Select inputs -->
  <label>Select input label
    <select>
      <option value="1" selected>Option one</option>
      <option value="2">Option two</option>
      <option value="3">Option three</option>
    </select>
  </label>

  <!-- Submit button -->
  <input type="submit" value="Submit button">
  
</form>

Utility classes

Handy for some additional styling control and UI elements.

Buttons

If a button element is not appropriate, anchor tags can be styled as a button via the btn-primary and btn-secondary classes.

<a href="/" class="btn-primary">Button link</a>
<a href="/" class="btn-secondary">Button link</a>

Primary button link Secondary button link

Presentation blocks

Panels

A visual container can be applied with the use of the panel class. This encloses the element in a subtle shaded box, without effected in the markup semantics, like so:

<div class="panel">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit...
  </p>
</div>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque perspiciatis placeat sit deserunt suscipit quisquam eaque hic dolorum libero magnam! Ducimus quis adipisci amet mollitia atque dicta iste aut ratione?

Flexbox

Adding the class flex-btwn applies the following CSS to an element:

.flex-btwn {
  display: flex;
  justify-content: space-between;
  align-content: center;
}

This can be helpful for the common layout task of spacing some items out across a containing element, for example:

<ul class="flex-btwn">
  <li>Items</li>
  <li>Spread</li>
  <li>Across</li>
  <li>Element</li>
</ul>

Items
Spread
Across
Element