List

<div>
    <h3>Unordered List</h3>
    <ul>
        <li>Unordered List item</li>
        <li>
            Unordered List item with nested unordered list
            <ul>
                <li>Nested unordered list item</li>
                <li>
                    Nested unordered list item with a nested unordered list
                    <ul>
                        <li>Another Nested unordered list item</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>Unordered List item <br />Unordered List item</li>
    </ul>
    <h3>Bold Bullet List</h3>
    <ul class="bold-list">
        <li>Bold Bullet List Item</li>
        <li>Bold Bullet List Item</li>
    </ul>
    <h3>Checklist</h3>
    <ul class="checklist">
        <li>Checklist Item</li>
        <li>Checklist Item</li>
    </ul>
    <h3>Ordered List</h3>
    <ol>
        <li>Ordered List item</li>
        <li>Ordered List item</li>
        <li>Ordered List item</li>
        <li>Ordered List item</li>
        <li>Ordered List item</li>
        <li>Ordered List item</li>
        <li>Ordered List item</li>
        <li>Ordered List item</li>
        <li>Ordered List item</li>
        <li>Ordered List item</li>
        <li>Ordered List item</li>
        <li>Ordered List item</li>
    </ol>
    <ol>
        <li>
            Ordered List with nested unordered List
            <ul>
                <li>Nested unordered list item</li>
                <li>Nested unordered list item</li>
            </ul>
        </li>
        <li>Ordered List item</li>
        <li>Ordered List item</li>
    </ol>
    <h3>Definition List</h3>
    <dl>
        <dt>Description List item term</dt>
        <dd>Description List item description</dd>
        <dt>Description List item term</dt>
        <dd>Description List item description 1</dd>
        <dd>Description List item description 2</dd>
    </dl>
    <h3>Simple Definition List</h3>
    <dl class="simple-definition-list">
        <dt>Description List item term</dt>
        <dd>Description List item description</dd>
        <dt>Description List item term</dt>
        <dd>Description List item description 1</dd>
        <dd>Description List item description 2</dd>
    </dl>
    <h3>Tuple List</h3>
    <ul class="tuple-list">
        <li class="tuple-list__entry">
            <span class="tuple-list__label">Dauer:</span><span class="tuple-list__value">1 Tag</span>
        </li>
        <li class="tuple-list__entry">
            <span class="tuple-list__label">Teilnehmer:</span><span class="tuple-list__value">Management, Product Owner, Digital Product Designer</span>
        </li>
        <li class="tuple-list__entry">
            <span class="tuple-list__label">Ergebnis:</span><span class="tuple-list__value">Eine konkrete Produktvision und ein Vorschlag zu umsetzbaren nächsten
                Schritten.</span>
        </li>
    </ul>
</div>
<div>
    <h3>Unordered List</h3>

    <ul>
        <li>
            Unordered List item
        </li>
        <li>
            Unordered List item with nested unordered list
            <ul>
                <li>
                    Nested unordered list item
                </li>
                <li>
                    Nested unordered list item with a nested unordered list
                    <ul>
                        <li>
                            Another Nested unordered list item
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            Unordered List item <br />
            Unordered List item
        </li>
    </ul>

    <h3>Bold Bullet List</h3>

    <ul class="bold-list">
        <li>
            Bold Bullet List Item
        </li>
        <li>
            Bold Bullet List Item
        </li>
    </ul>

    <h3>Checklist</h3>

    <ul class="checklist">
        <li>
            Checklist Item
        </li>
        <li>
            Checklist Item
        </li>
    </ul>

    <h3>Ordered List</h3>

    <ol>
        <li>
            Ordered List item
        </li>
        <li>
            Ordered List item
        </li>
        <li>
            Ordered List item
        </li>
        <li>
            Ordered List item
        </li>
        <li>
            Ordered List item
        </li>
        <li>
            Ordered List item
        </li>

        <li>
            Ordered List item
        </li>
        <li>
            Ordered List item
        </li>
        <li>
            Ordered List item
        </li>

        <li>
            Ordered List item
        </li>
        <li>
            Ordered List item
        </li>
        <li>
            Ordered List item
        </li>
    </ol>

    <ol>
        <li>
            Ordered List with nested unordered List
            <ul>
                <li>
                    Nested unordered list item
                </li>
                <li>
                    Nested unordered list item
                </li>
            </ul>
        </li>
        <li>
            Ordered List item
        </li>
        <li>
            Ordered List item
        </li>
    </ol>

    <h3>Definition List</h3>

    <dl>
        <dt>Description List item term</dt>
        <dd>Description List item description</dd>
        <dt>Description List item term</dt>
        <dd>Description List item description 1</dd>
        <dd>Description List item description 2</dd>
    </dl>

    <h3>Simple Definition List</h3>

    <dl class="simple-definition-list">
        <dt>Description List item term</dt>
        <dd>Description List item description</dd>
        <dt>Description List item term</dt>
        <dd>Description List item description 1</dd>
        <dd>Description List item description 2</dd>
    </dl>


    <h3>Tuple List</h3>
    <ul class="tuple-list">
        <li class="tuple-list__entry"><span class="tuple-list__label">Dauer:</span><span class="tuple-list__value">1 Tag</span></li>
        <li class="tuple-list__entry"><span class="tuple-list__label">Teilnehmer:</span><span class="tuple-list__value">Management, Product Owner, Digital Product Designer</span></li>
        <li class="tuple-list__entry"><span class="tuple-list__label">Ergebnis:</span><span class="tuple-list__value">Eine konkrete Produktvision und ein Vorschlag zu umsetzbaren nächsten Schritten.</span></li>
    </ul>
</div>
{
  "text": "Listen"
}
  • Content:
    $list-indent: 0.5rem;
    
    .checklist {
      @extend %unsorted-list;
    
      padding-left: 1.2rem;
    
      li {
        @extend %heading-font-bold;
    
        padding-left: $list-indent;
        list-style-type: "✓";
    
        &::marker {
          color: $bullet-list-color;
          font-size: 1.5rem;
        }
      }
    }
    
  • URL: /components/raw/list/_checked-list.scss
  • Filesystem Path: components/05-atoms/text/block/list/_checked-list.scss
  • Size: 275 Bytes
  • Content:
    // ---- Definition Lists -------------------------------------------------------
    //
    // adapted from: /components/detail/talk-page
    // see lib/styles/tools/text
    
    dl:not([class]) {
      @extend %definition-list;
    }
    
    .simple-definition-list {
      @extend %definition-list-simple;
    }
    
  • URL: /components/raw/list/_definition-list.scss
  • Filesystem Path: components/05-atoms/text/block/list/_definition-list.scss
  • Size: 272 Bytes
  • Content:
    @import './checked-list';
    @import './definition-list';
    @import './ordered-list';
    @import './tuple-list';
    @import './unordered-list';
    
  • URL: /components/raw/list/_list.scss
  • Filesystem Path: components/05-atoms/text/block/list/_list.scss
  • Size: 133 Bytes
  • Content:
    // ---- Ordered Lists ----------------------------------------------------------
    //
    // Generated numbers from default ordered lists can't be styled directly
    // yet. Therefore we disable auto-numbering and use a counter to increment
    // a number and insert it via :before content.
    //
    // Scope element based selector to elements, that do not carry a
    // class attribute, to prevent reverting styles for all non-default lists.
    //
    
    $number-space: $spacer-md;
    $list-indent: 2.5rem;
    
    ol:not([class]) {
      @extend %unsorted-list;
    
      padding-left: $list-indent;
    
      > li {
        padding-left: 0.5rem;
        margin-bottom: $spacer-xs;
        counter-increment: number;
    
        &::marker {
          @extend %heading-font-bold;
    
          color: $bullet-list-color-secondary;
          content: counter(number);
          font-size: $font-size-base;
          line-height: $paragraph-line-height;
    
          @media screen and (min-width: $grid-breakpoint-md) {
            font-size: $font-size-sm;
          }
        }
      }
    }
    
  • URL: /components/raw/list/_ordered-list.scss
  • Filesystem Path: components/05-atoms/text/block/list/_ordered-list.scss
  • Size: 967 Bytes
  • Content:
    $tuple-list-label-width: 8rem;
    
    .tuple-list {
      @extend %list-unstyled;
    }
    
    .tuple-list__label {
      @extend %teaser-caption;
    
      display: block;
      color: $tupel-list-label-color;
    }
    
    .tuple-list__entry {
      margin-bottom: $spacer-sm;
    }
    
    .tuple-list__value {
      @extend %heading-font-regular;
    
      display: block;
    }
    
    @media screen and (min-width: $grid-breakpoint-md) {
      .tuple-list__entry {
        display: grid;
        margin-bottom: $spacer-xxs;
        grid-template-areas: "label value";
        grid-template-columns: $tuple-list-label-width auto;
        grid-template-rows: auto;
      }
    
      .tuple-list__label {
        grid-area: label;
      }
    
      .tuple-list__value {
        grid-area: value;
      }
    }
    
  • URL: /components/raw/list/_tuple-list.scss
  • Filesystem Path: components/05-atoms/text/block/list/_tuple-list.scss
  • Size: 668 Bytes
  • Content:
    $bullet-size: 1.9rem;
    
    .list-unstyled {
      @extend %list-unstyled;
    }
    
    // ---- Unordered Lists --------------------------------------------------------
    //
    // Scope element based selector to elements, that do not carry a
    // class attribute, to prevent reverting styles for all non-default lists.
    //
    
    ul:not([class]) {
      @extend %unsorted-list;
    
      padding-left: 1.5rem;
    
      li {
        @extend %body-font-regular;
    
        list-style-type: disc;
      }
    
      > li {
        &::marker {
          color: $bullet-list-color;
          font-size: $bullet-size;
          line-height: $paragraph-line-height;
        }
    
        li::marker {
          color: $bullet-list-color-secondary;
          font-size: $bullet-size;
          line-height: $paragraph-line-height;
        }
      }
    }
    
    // ---- Bold Bullet Lists ----------------------------------------------------------
    //
    .bold-list {
      @extend %unsorted-list;
    
      padding-left: 1.5rem;
    
      > li {
        @extend %heading-font-bold;
    
        &::marker {
          color: $bullet-list-color;
          font-size: $bullet-size;
        }
      }
    }
    
  • URL: /components/raw/list/_unordered-list.scss
  • Filesystem Path: components/05-atoms/text/block/list/_unordered-list.scss
  • Size: 1 KB

@todo:

find a solution to make it work without a div wrapper for jsx