List

<div>
    <h3>Unordered List</h3>
    <ul>
        <li>Unordered List item</li>
        <li>
            Unordered List item
            <ul>
                <li>Nested unordered list item</li>
                <li>
                    Nested unordered list item
                    <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>Bullet List Bold Item</li>
        <li>Bullet List Bold 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 item
            <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
            <ul>
                <li>
                    Nested unordered list item
                </li>
                <li>
                    Nested unordered list item
                    <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>
            Bullet List Bold Item
        </li>
        <li>
            Bullet List Bold 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 item
            <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: $spacer-xs + $spacer-sm;
    
    .checklist {
      @extend %unsorted-list;
      @extend %heading-font-bold;
    
      li {
        padding-left: $list-indent;
    
        &::before {
          @extend %icon;
    
          position: absolute;
          top: 0.45em;
          left: 0;
          color: $bullet-list-color;
          content: $icon-check;
          -webkit-text-stroke-width: 2px;
        }
      }
    }
    
  • URL: /components/raw/list/_checked-list.scss
  • Filesystem Path: components/05-atoms/text/block/list/_checked-list.scss
  • Size: 359 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;
    
    ol:not([class]) {
      @extend %body-font-regular;
      @include list-unstyled;
    
      margin-bottom: $spacer-md;
      counter-reset: number;
      font-size: $font-size-base;
      line-height: $paragraph-line-height;
    
      @media screen and (min-width: $grid-breakpoint-md) {
        font-size: $font-size-sm;
        line-height: $paragraph-line-height;
      }
    
      > li {
        position: relative;
        padding-left: $number-space;
        margin-bottom: $spacer-xs;
    
        &::before {
          @extend %heading-font-bold;
    
          position: absolute;
          top: -0.2rem;
          left: -0.5rem;
          width: $number-space;
          color: $bullet-list-color-secondary;
          content: counter(number);
          counter-increment: number;
          font-size: $font-size-base;
          line-height: $paragraph-line-height;
          text-align: right;
    
          @media screen and (min-width: $grid-breakpoint-md) {
            top: -0.23rem;
            font-size: $font-size-sm;
            line-height: $paragraph-line-height;
          }
        }
      }
    
      ul {
        // Nested lists need diffrent vertical spacings
        // to blend into the outer list.
        margin-top: $spacer-xs;
        font-size: $font-size-base;
        line-height: $paragraph-line-height;
    
        @media screen and (min-width: $grid-breakpoint-md) {
          font-size: $font-size-sm;
          line-height: $paragraph-line-height;
        }
    
        /* stylelint-disable-next-line selector-max-compound-selectors */
        &,
        li > ul > li {
          margin-bottom: 0;
        }
      }
    }
    
  • URL: /components/raw/list/_ordered-list.scss
  • Filesystem Path: components/05-atoms/text/block/list/_ordered-list.scss
  • Size: 1.9 KB
  • 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: $spacer-xs; // ~9px
    $bullet-offset: $spacer-sm; // ~16px
    $list-indent: $bullet-offset + $bullet-size;
    
    .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]),
    .bold-list {
      @extend %unsorted-list;
      @extend %body-font-regular;
    
      > li {
        padding-left: $list-indent;
    
        &::before {
          position: absolute;
          top: 0.4rem; //magic number
          left: 0;
          width: $bullet-size;
          height: $bullet-size;
          background: $bullet-list-color-primary;
          border-radius: 50%;
          content: "";
    
          @media screen and (min-width: $grid-breakpoint-md) {
            top: 0.5rem; //magic number
          }
        }
      }
    
      ul {
        // Nested lists need diffrent vertical spacings
        // to blend into the outer list.
        margin-top: $spacer-xs;
    
        /* stylelint-disable-next-line selector-max-compound-selectors */
        &,
        li > ul > li {
          margin-bottom: 0;
        }
    
        // Change bullet appeareance in nested contexts
        li::before {
          background: $bullet-list-color-secondary;
        }
      }
    }
    
    // ---- Bold Bullet Lists ----------------------------------------------------------
    //
    .bold-list {
      @extend %heading-font-bold;
    
      > li {
        &::before {
          top: 0.59rem; //magic number
    
          @media screen and (min-width: $grid-breakpoint-md) {
            top: 0.73rem; //magic number
          }
        }
      }
    }
    
  • URL: /components/raw/list/_unordered-list.scss
  • Filesystem Path: components/05-atoms/text/block/list/_unordered-list.scss
  • Size: 1.6 KB

@todo:

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