Skip to main content

Lists v0.2.0+ HelixUI v0.2.0 or later required

Description List

Added: v0.2.0

Options
First Key Term
This is the description and/or data value.
Second Key Term
This is the description and/or data value. This paragraph shows the default wrapping that exists on this element. Description detail tags will wrap across multiple lines by default.
Third Key Term
This is the description and/or data value. This third description is an example of when you may have long strings in your content that usually don't wrap across lines. The .hxForceWordBreak CSS modifier class can be used on the dd to achieve the wrapping when needed. This will break up strings and break a word.
<dl class="{{classes}}">
  <div>
    <dt>First Key Term</dt>
    <dd>...</dd>
  </div>
  <div>
    <dt>Second Key Term</dt>
    <dd>...</dd>
  </div>
  <div>
    <dt>Third Key Term</dt>
    <dd class="hxForceWordBreak">...</dd>
  </div>
</dl>

Unordered List

Added: v0.10.0

  • List Item 1
  • List Item 2 with a bunch of extra text that should hopefully wrap to the next line if your screen is small enough.
  • List Item 3
    • List Item 3.1
    • List Item 3.2
    • List Item 3.3
<ul>
  <li>List Item 1</li>
  <li>List Item 2...</li>
  <li>List Item 3
    <ul>
      <li>List Item 3.1</li>
      <li>List Item 3.2</li>
      <li>List Item 3.3</li>
    </ul>
  </li>
</ul>

Ordered List

Added: v0.10.0

  1. Child Item
  2. Child Item
  3. Child Item
    1. Child Item
    2. Child Item
    3. Child Item
      1. Child Item
      2. Child Item
      3. Child Item
        1. Child Item
        2. Child Item
        3. Child Item
          1. Child Item
          2. Child Item
          3. Child Item
<ol>
  ...
  <li>Child Item
    <ol>
      ...
      <li>Child Item
        <ol>
          ...
          <li>Child Item
            <ol>
              ...
              <li>Child Item
                <ol>
                  <li>Child Item</li>
                  ...
                </ol>
              </li>
            </ol>
          </li>
        </ol>
      </li>
    </ol>
  </li>
</ol>