@zplane-web/craft-licensing

Bullet list 

<ul class="bullet-list" role="list" data-bullet-list-type="unordered">
    <li class="bullet-list__item">
        <span class="bullet-list__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</span>

    </li>
    <li class="bullet-list__item">
        <span class="bullet-list__text">sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span>

    </li>
    <li class="bullet-list__item">
        <span class="bullet-list__text">sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span>

        <ul class="bullet-list" role="list" data-bullet-list-type="checked">
            <li class="bullet-list__item">
                <span class="bullet-list__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</span>

                <ul class="bullet-list" role="list" data-bullet-list-type="unordered">
                    <li class="bullet-list__item">
                        <span class="bullet-list__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</span>

                    </li>
                    <li class="bullet-list__item">
                        <span class="bullet-list__text">sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span>

                    </li>
                </ul>
            </li>
            <li class="bullet-list__item">
                <span class="bullet-list__text">sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span>

            </li>
        </ul>
    </li>
    <li class="bullet-list__item">
        <span class="bullet-list__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</span>

    </li>
    <li class="bullet-list__item">
        <span class="bullet-list__text">sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span>

    </li>
    <li class="bullet-list__item">
        <span class="bullet-list__text">sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span>

        <ul class="bullet-list" role="list" data-bullet-list-type="crossed">
            <li class="bullet-list__item">
                <span class="bullet-list__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</span>

                <ul class="bullet-list" role="list" data-bullet-list-type="unordered">
                    <li class="bullet-list__item">
                        <span class="bullet-list__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</span>

                    </li>
                    <li class="bullet-list__item">
                        <span class="bullet-list__text">sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span>

                    </li>
                </ul>
            </li>
            <li class="bullet-list__item">
                <span class="bullet-list__text">sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span>

            </li>
        </ul>
    </li>
    <li class="bullet-list__item">
        <span class="bullet-list__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</span>

    </li>
    <li class="bullet-list__item">
        <span class="bullet-list__text">sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span>

    </li>
    <li class="bullet-list__item">
        <span class="bullet-list__text">sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span>

        <ol class="bullet-list" role="list" start="2" data-bullet-list-type="ordered">
            <li class="bullet-list__item">
                <span class="bullet-list__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</span>

            </li>
            <li class="bullet-list__item">
                <span class="bullet-list__text">sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span>

            </li>
        </ol>
    </li>
    <li class="bullet-list__item">
        <span class="bullet-list__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</span>

        <ul class="bullet-list" role="list" data-bullet-list-type="unordered">
            <li class="bullet-list__item">
                <span class="bullet-list__text">Lorem ipsum</span>

            </li>
            <li class="bullet-list__item">
                <span class="bullet-list__text">Dolor sit amet</span>

            </li>
        </ul>
    </li>
    <li class="bullet-list__item">
        <span class="bullet-list__text">sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span>

        <ol class="bullet-list" role="list" start="10" data-bullet-list-type="ordered">
            <li class="bullet-list__item">
                <span class="bullet-list__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</span>

            </li>
            <li class="bullet-list__item">
                <span class="bullet-list__text">sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span>

            </li>
        </ol>
    </li>
</ul>
 
{% set ordered = ordered ?? false %}
{% set type = type ??? (ordered ? 'ordered' : 'unordered') %}
{% set tag = ordered ? 'ol' : 'ul' -%}

<{{ tag }} {{ html_attributes({
  class: 'bullet-list',
  role: 'list',
  start: ordered ? start|default,
  reversed: reversed ?? false,
  'data-bullet-list-type': type,
}, attrs ?? {}) }}>
  {% for item in items %}
    <li class="bullet-list__item">
      <span class="bullet-list__text">
        {{- (item.text ?? item) | componentize(inline_only=true) -}}
      </span>

      {% if item.list|default %}
        {% include '@bullet-list' with item.list only %}
      {% endif -%}
    </li>
  {% endfor %}
</{{ tag }}>
 
{
  "items": [
    {
      "text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
    },
    {
      "text": "sed diam nonumy eirmod tempor invidunt ut labore et dolore magna"
    },
    {
      "text": "sed diam nonumy eirmod tempor invidunt ut labore et dolore magna",
      "list": {
        "type": "checked",
        "items": [
          {
            "text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr",
            "list": {
              "items": [
                {
                  "text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
                },
                {
                  "text": "sed diam nonumy eirmod tempor invidunt ut labore et dolore magna"
                }
              ]
            }
          },
          {
            "text": "sed diam nonumy eirmod tempor invidunt ut labore et dolore magna"
          }
        ]
      }
    },
    {
      "text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
    },
    {
      "text": "sed diam nonumy eirmod tempor invidunt ut labore et dolore magna"
    },
    {
      "text": "sed diam nonumy eirmod tempor invidunt ut labore et dolore magna",
      "list": {
        "type": "crossed",
        "items": [
          {
            "text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr",
            "list": {
              "items": [
                {
                  "text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
                },
                {
                  "text": "sed diam nonumy eirmod tempor invidunt ut labore et dolore magna"
                }
              ]
            }
          },
          {
            "text": "sed diam nonumy eirmod tempor invidunt ut labore et dolore magna"
          }
        ]
      }
    },
    {
      "text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
    },
    {
      "text": "sed diam nonumy eirmod tempor invidunt ut labore et dolore magna"
    },
    {
      "text": "sed diam nonumy eirmod tempor invidunt ut labore et dolore magna",
      "list": {
        "ordered": true,
        "items": [
          {
            "text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
          },
          {
            "text": "sed diam nonumy eirmod tempor invidunt ut labore et dolore magna"
          }
        ],
        "start": 2
      }
    },
    {
      "text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr",
      "list": {
        "items": [
          {
            "text": "Lorem ipsum"
          },
          {
            "text": "Dolor sit amet"
          }
        ]
      }
    },
    {
      "text": "sed diam nonumy eirmod tempor invidunt ut labore et dolore magna",
      "list": {
        "ordered": true,
        "items": [
          {
            "text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
          },
          {
            "text": "sed diam nonumy eirmod tempor invidunt ut labore et dolore magna"
          }
        ],
        "start": 10
      }
    }
  ]
}
  • Content: 
    .bullet-list {
  color: var(--bullet-list-color, inherit);
  font-size: var(--bullet-list-font-size, inherit);
  line-height: var(--bullet-list-line-height, var(--line-height-wide));
  list-style-type: '\E001';
  padding-inline-start: 0;

  & & {
    margin-block-start: var(--bullet-list-spacing, 0.8em);
  }

  &:is([data-bullet-list-type='checked']) {
    list-style-type: '\E000';
  }

  &:is([data-bullet-list-type='crossed']) {
    list-style-type: '\E002';
  }

  &:is([data-bullet-list-type='ordered']) {
    list-style-type: decimal;
  }
}

.bullet-list__item {
  inline-size: calc(100% - var(--bullet-list-indent, 2em));
  inset-inline-start: var(--bullet-list-indent, 1.1em);
  padding-inline-start: var(--bullet-list-marker-space, 0.4em);
  position: relative;

  & + & {
    margin-block-start: var(--bullet-list-spacing, 0.8em);
  }

  &::marker {
    color: var(--bullet-list-marker-color, var(--color-orange-500));
    font-family: var(--bullet-list-marker-font-family, 'bullet', var(--root-font-family));
    font-size: var(--bullet-list-marker-font-size, 1em);
    font-weight: var(--bullet-list-marker-font-weight, var(--font-weight-bold));
    inline-size: 1em;
    line-height: 0;
  }
}

.bullet-list__text {
  display: flow-root;
}
  • URL: /components/raw/bullet-list/bullet-list.scss
  • Filesystem Path: src/components/2-atoms/bullet-list/bullet-list.scss
  • Size: 1.3 KB

No notes defined.