Pattern Library

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>
    Tomatoes<br>
    (Yes, they're a fruit too)
  </li>
</ul>

• If the list has items in no natural order, use an Unordered List (<ul>) element.
• If the list has items that need to be numbered, use an Ordered List (<ol>) element.
• If you want name/value pairs of term to definitions, then use a Definition List (<dl>) element, with its <dt> and <dd> elements.

Pattern scope:

Atom – The smallest possible pattern, independent

Relevant assets:

Stylesheets:

• Shared stylesheets [See index.css]
• /css/patterns/list.css

• Scheme: row 

  Strips off the markers, and aligns the list in a row with default spacing

  Example

  Open type in a new window

  Code sample

  <ul data-scheme="row">
    <li>Apples</li>
    <li>Bananas</li>
    <li>
      Tomatoes<br>
      (Yes, they're a fruit too)
    </li>
  </ul>

  Notes

  • Use the attribute: data-scheme="row".
• Scheme: Checklist 

  Replaces the normal list marker with a Tick, or Check Mark (✓) character.

  Example

  Open type in a new window

  Code sample

  <ul data-scheme="checklist">
    <li>Apples</li>
    <li>Bananas</li>
    <li>
      Tomatoes<br>
      (Yes, they're a fruit too)
    </li>
  </ul>

  Notes

  • Use the attribute: data-scheme="checklist".
• Scheme: FAQ 

  A list of two or more Question/Answer items, that are represented as accordions.

  Example

  Open type in a new window

  Code sample

  <ul data-scheme="faq">
    <li> 
      <details>
        <summary>What is fibre?</summary>
        <div class="answer">
          <p>
            A fibre connection sends data at incredible speeds using fibre optic cables.
          </p>
        </div>
      </details>
    </li>
    <li> 
      <details>
        <summary>How do I know if there's fibre in my area?</summary>
        <div class="answer">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Quisque pulvinar accumsan mauris nec tincidunt.
          </p>
        </div>
      </details>
    </li>
    <li> 
      <details>
        <summary>What if there's no fibre in my neighbourhood?</summary>
        <div class="answer">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Quisque pulvinar accumsan mauris nec tincidunt.
          </p>
        </div>
      </details>
    </li>
  </ul>

  Notes

  • Use the attribute: data-scheme="faq".
  • Each list-item (<li>) must contain a <details> element, complete with a <div class="answer"> inside.