@e-fellows/website-2022

Textliste 

<ul class="bullet-list bullet-list--unordered" role="list">
    <li class="bullet-list__item">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
    <li class="bullet-list__item">sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</li>
    <li class="bullet-list__item">sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
        <ul class="bullet-list bullet-list--unordered" role="list">
            <li class="bullet-list__item">Lorem ipsum dolor sit amet, consetetur sadipscing elitr
                <ul class="bullet-list bullet-list--unordered" role="list">
                    <li class="bullet-list__item">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
                    <li class="bullet-list__item">sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</li>
                </ul>
            </li>
            <li class="bullet-list__item">sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</li>
        </ul>
    </li>
    <li class="bullet-list__item">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
    <li class="bullet-list__item">sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</li>
    <li class="bullet-list__item">sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
        <ol class="bullet-list bullet-list--ordered" role="list" start="2">
            <li class="bullet-list__item">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
            <li class="bullet-list__item">sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</li>
        </ol>
    </li>
    <li class="bullet-list__item">Lorem ipsum dolor sit amet, consetetur sadipscing elitr
        <ul class="bullet-list bullet-list--checked" role="list">
            <li class="bullet-list__item">Lorem ipsum</li>
            <li class="bullet-list__item">Dolor sit amet</li>
        </ul>
    </li>
    <li class="bullet-list__item">sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
        <ol class="bullet-list bullet-list--ordered" role="list" start="10">
            <li class="bullet-list__item">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
            <li class="bullet-list__item">sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</li>
        </ol>
    </li>
</ul>
 
{% set ordered = ordered ?? false %}
{% set checked = checked ?? false %}
{% set tag = ordered ? 'ol' : 'ul' %}

<{{ tag }} {{ html_attributes({
  class: {
    'bullet-list': true,
    ("bullet-list--#{ordered ? 'ordered' : 'unordered'}"): not checked,
    'bullet-list--checked': checked and not ordered,
  },
  role: 'list',
  start: ordered ? start,
}, attrs ?? {}) }}>
  {% for item in items %}
    <li class="bullet-list__item">
      {{- (item.text ?? item) | componentize -}}

      {% 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": {
        "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": {
        "checked": true,
        "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: 
    :root {
  --bullet-list-color: currentColor;
  --bullet-list-indent: 1rem;
  --bullet-list-marker: '\2022';
  --bullet-list-marker-color: var(--color-orange);
  --bullet-list-marker-font: var(--font-family-indie-flower);
  --bullet-list-marker-size: 1.2em;
  --bullet-list-marker-space: 0.5rem;
  --bullet-list-spacing: 1rem;
}

.bullet-list {
  color: var(--bullet-list-color);
  line-height: var(--line-height-body);
  list-style-type: var(--bullet-list-marker);
  padding-inline-start: calc(var(--bullet-list-indent) + 2rem);

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

.bullet-list--unordered {
  --bullet-list-marker: '\2022';
}

.bullet-list--checked {
  --bullet-list-marker: '\2713';
}

.bullet-list--ordered {
  --bullet-list-marker: decimal;
}

.bullet-list__item {
  padding-inline-start: var(--bullet-list-marker-space);
  position: relative;

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

  &::marker {
    color: var(--bullet-list-marker-color);
    font-family: var(--bullet-list-marker-font);
    font-size: var(--bullet-list-marker-size);
    line-height: 0;
  }
}
  • URL: /components/raw/bullet-list/bullet-list.scss
  • Filesystem Path: src/components/1-atoms/bullet-list/bullet-list.scss
  • Size: 1.1 KB

No notes defined.