51751ABB-5214-4D7F-AB7F-8A7599AC7751 Created with sketchtool.

Ranked list

100% 
<ol class="o-list-ranked">
    <li>
        <h5>Lorem ipsum dolor sit amet</h5>
    </li>
    <li>
        <h5>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</h5>
    </li>
    <li>
        <h5>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</h5>
    </li>
    <li>
        <h5>Lorem ipsum dolor sit amet</h5>
    </li>
    <li>
        <h5>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</h5>
    </li>
    <li>
        <h5>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</h5>
    </li>
    <li>
        <h5>List item</h5>
    </li>
</ol>
 
<ol class="o-list-ranked{% if classes %} {{ classes }}"{% endif %}">
    <li>
        <h5>{{ itemShort }}</h5>
    </li>
    <li>
        <h5>{{ itemMedium }}</h5>
    </li>
    <li>
        <h5>{{ itemLong }}</h5>
    </li>
    <li>
        <h5>{{ itemShort }}</h5>
    </li>
    <li>
        <h5>{{ itemMedium }}</h5>
    </li>
    <li>
        <h5>{{ itemLong }}</h5>
    </li>
    <li>
        <h5>{{ text }}</h5>
    </li>
</ol>
 
{
  "text": "List item",
  "itemShort": "Lorem ipsum dolor sit amet",
  "itemMedium": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam",
  "itemLong": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam",
  "classes": ""
}
  • Handle: @ranked-list
  • Preview:
  • Filesystem Path: src/patterns/10-elements/lists/ranked-list/ranked-list.twig

There are no notes for this item.