# List

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <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>
                <li>
                    Nested unordered list item with a nested ordered list
                    <ol>
                        <li>
                            Another Nested ordered list item
                        </li>
                        <li>
                            Another Nested ordered list item
                        </li>
                    </ol>
                </li>
            </ul>
        </li>
        <li>
            <p>ndustrial grade voodoo god papier-mache tanto free-market tower futurity jeans nodality singularity alcohol industrial grade tank-traps engine vehicle tattoo.</p>
            <p>ndustrial grade voodoo god papier-mache tanto free-market tower futurity jeans nodality singularity alcohol industrial grade tank-traps engine vehicle tattoo.</p>
        </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 with a nestet ordered list
            <ol>
                <li>
                    Another Nested ordered list item
                </li>
                <li>
                    Another Nested ordered list item
                </li>
            </ol>
        </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>

`
`

    <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>
                <li>
                    Nested unordered list item with a nested ordered list
                    <ol>
                        <li>
                            Another Nested ordered list item
                        </li>
                        <li>
                            Another Nested ordered list item
                        </li>
                    </ol>
                </li>
            </ul>
        </li>
        <li>
            <p>{{text}}</p>
            <p>{{text}}</p>
        </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 with a nestet ordered list
            <ol>
                <li>
                    Another Nested ordered list item
                </li>
                <li>
                    Another Nested ordered list item
                </li>
            </ol>
        </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>

`
`

    {
      "text": "ndustrial grade voodoo god papier-mache tanto free-market tower futurity jeans nodality singularity alcohol industrial grade tank-traps engine vehicle tattoo."
    }

`
File:

- Content:
  `

      .checklist {
        @extend %base-list-styling;

        margin-left: 1.2rem; //magic number

        li {
          @extend %heading-font-bold;

          padding-left: $spacer-xxs;
          list-style-type: '✓';

          &::marker {
            font-size: 1.5rem;
            color: $bullet-list-color;
          }
        }
      }

  `
- URL: /components/raw/list/_checked-list.scss
- Filesystem Path: components/05-atoms/list/_checked-list.scss
- Size: 269 Bytes

- Content:
  `

      // ---- Definition Lists -------------------------------------------------------
      //
      // adapted from: /components/detail/talk-page
      // see lib/styles/tools/text

      dl:not([class]),
      dl {
        @extend %definition-list;

        > * + * {
          margin-top: $spacer-xs;
        }
      }

      .simple-definition-list {
        @extend %definition-list-simple;
      }

      %definition-list {
        dt {
          @extend %heading-font-bold;

          font-size: $font-size-base;
          line-height: $paragraph-line-height;
          color: $definition-list-dt-color;
        }

        dd {
          @extend %body-font-regular;

          margin-left: $spacer-md;
          font-size: $font-size-base;
          line-height: $paragraph-line-height;
        }
      }

      %definition-list-simple {
        dd {
          @extend %heading-font-regular;

          text-transform: uppercase;
        }

        dd,
        dt {
          margin-left: 0;
        }
      }

  `
- URL: /components/raw/list/_definition-list.scss
- Filesystem Path: components/05-atoms/list/_definition-list.scss
- Size: 790 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/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.
      //

      ol:not([class]) {
        @extend %base-list-styling;
        @extend %body-font-regular;
        @extend %list-unstyled;

        counter-reset: number;

        > * + * {
          margin-top: $spacer-xxs;
        }

        > li {
          counter-increment: number;

          &::before {
            @extend %heading-font-bold;

            content: counter(number);

            padding-right: $spacer-xxs;

            font-size: $font-size-base;
            line-height: $paragraph-line-height;
            color: $bullet-list-color-secondary;

            @media screen and (min-width: $grid-breakpoint-md) {
              font-size: $font-size-sm;
            }
          }

          ul {
            margin-left: $spacer-base;
          }

          ol {
            margin-left: $spacer-md;
          }
        }
      }

  `
- URL: /components/raw/list/_ordered-list.scss
- Filesystem Path: components/05-atoms/list/_ordered-list.scss
- Size: 1.1 KB

- Content:
  `

      $tuple-list-label-width: 8rem;

      .tuple-list {
        @extend %list-unstyled;

        > * + * {
          margin-top: $spacer-sm;
        }
      }

      .tuple-list__label {
        @extend %heading-font-bold;

        display: block;
        font-size: $font-size-xs;
        color: $tupel-list-label-color;
        text-transform: uppercase;
      }

      .tuple-list__value {
        @extend %heading-font-regular;

        display: block;
        font-size: $font-size-xs;
        line-height: $paragraph-line-height;
      }

      @media screen and (min-width: $grid-breakpoint-md) {
        .tuple-list {
          > * + * {
            margin-top: $spacer-xxs;
          }
        }

        .tuple-list__entry {
          display: grid;
          grid-template-areas: 'label value';
          grid-template-columns: $tuple-list-label-width auto;
          /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
          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/list/_tuple-list.scss
- Size: 916 Bytes

- Content:
  `

      .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], [role='list']),
      .bold-list {
        @extend %base-list-styling;

        margin-left: $spacer-xs;

        > * + * {
          margin-top: $spacer-xxs;
        }

        > li {
          @extend %body-font-regular;

          padding-left: $spacer-xxs;
          list-style-type: '●';

          &::marker {
            font-size: $font-size-sm;
            color: $bullet-list-color;
          }

          li::marker {
            font-size: $font-size-sm;
            color: $bullet-list-color-secondary;
          }

          ul {
            margin-left: $spacer-sm;
          }

          ol {
            margin-left: $spacer-xxs;
          }
        }
      }

      // ---- Bold Bullet Lists ----------------------------------------------------------
      //
      .bold-list {
        @extend %base-list-styling;

        > li {
          @extend %heading-font-bold;

          list-style-type: '•';

          &::marker {
            font-size: $font-size-lg;
            color: $bullet-list-color;
          }
        }
      }

  `
- URL: /components/raw/list/_unordered-list.scss
- Filesystem Path: components/05-atoms/list/_unordered-list.scss
- Size: 1.1 KB

- Handle: @list
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/05-atoms/list/list.html

# @todo:

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