Copy environment

Column List 

<div class="column-list grid grid--no-vertical-gutter">
    <div class="grid__col column-list__column animation__target">
        <ul class="bullets column-list__list ">
            <li class="bullets__list-item">
                <span class="bullets__list-amount">2&nbsp;&#10042;</span>Lorem Ipsum - Award for Being the Best Around
            </li>
            <li class="bullets__list-item">
                <span class="bullets__list-amount">5&nbsp;&#10042;</span>Lorem clicksum - the Most Clicks per Day Award
            </li>
            <li class="bullets__list-item">
                <span class="bullets__list-amount">9&nbsp;&#10042;</span>Lorem sipsum - 2020 Award for having great coffee
            </li>
            <li class="bullets__list-item">
                <span class="bullets__list-amount">8&nbsp;&#10042;</span>Lorem sipsum - 2018 Award for the best colleagues
            </li>
            <li class="bullets__list-item">
                <span class="bullets__list-amount">1&nbsp;&#10042;</span>Lorem sipsum - 2019 Nominee for having great coffee
            </li>
        </ul>
    </div>
    <div class="grid__col column-list__column animation__target">
        <ul class="bullets column-list__list ">
            <li class="bullets__list-item">
                <span class="bullets__list-amount">2&nbsp;&#10042;</span>Lorem Ipsum - Award for Being the Best Around
            </li>
            <li class="bullets__list-item">
                <span class="bullets__list-amount">5&nbsp;&#10042;</span>Lorem clicksum - the Most Clicks per Day Award
            </li>
            <li class="bullets__list-item">
                <span class="bullets__list-amount">9&nbsp;&#10042;</span>Lorem sipsum - 2020 Award for having great coffee
            </li>
            <li class="bullets__list-item">
                <span class="bullets__list-amount">8&nbsp;&#10042;</span>Lorem sipsum - 2018 Award for the best colleagues
            </li>
            <li class="bullets__list-item">
                <span class="bullets__list-amount">1&nbsp;&#10042;</span>Lorem sipsum - 2019 Nominee for having great coffee
            </li>
        </ul>
    </div>
    <div class="grid__col column-list__column animation__target">
        <ul class="bullets column-list__list ">
            <li class="bullets__list-item">
                <span class="bullets__list-amount">2&nbsp;&#10042;</span>Lorem Ipsum - Award for Being the Best Around
            </li>
            <li class="bullets__list-item">
                <span class="bullets__list-amount">5&nbsp;&#10042;</span>Lorem clicksum - the Most Clicks per Day Award
            </li>
            <li class="bullets__list-item">
                <span class="bullets__list-amount">9&nbsp;&#10042;</span>Lorem sipsum - 2020 Award for having great coffee
            </li>
            <li class="bullets__list-item">
                <span class="bullets__list-amount">8&nbsp;&#10042;</span>Lorem sipsum - 2018 Award for the best colleagues
            </li>
            <li class="bullets__list-item">
                <span class="bullets__list-amount">1&nbsp;&#10042;</span>Lorem sipsum - 2019 Nominee for having great coffee
            </li>
        </ul>
    </div>
</div>
 
<div class="column-list grid grid--no-vertical-gutter">
    {% if data.columns %}
        {% for column in data.columns %}
            <div class="grid__col column-list__column animation__target">
                {% include '@bullets' with { data: column.bullets, class: 'column-list__list', modifier: '' } %}
            </div>
        {% endfor %}
    {% endif %}
</div>

{
  "language": "en-US",
  "data": {
    "columns": [
      {
        "bullets": {
          "items": [
            {
              "amount": "2",
              "title": "Lorem Ipsum - Award for Being the Best Around"
            },
            {
              "amount": "5",
              "title": "Lorem clicksum - the Most Clicks per Day Award"
            },
            {
              "amount": "9",
              "title": "Lorem sipsum - 2020 Award for having great coffee"
            },
            {
              "amount": "8",
              "title": "Lorem sipsum - 2018 Award for the best colleagues"
            },
            {
              "amount": "1",
              "title": "Lorem sipsum - 2019 Nominee for having great coffee"
            }
          ]
        }
      },
      {
        "bullets": {
          "items": [
            {
              "amount": "2",
              "title": "Lorem Ipsum - Award for Being the Best Around"
            },
            {
              "amount": "5",
              "title": "Lorem clicksum - the Most Clicks per Day Award"
            },
            {
              "amount": "9",
              "title": "Lorem sipsum - 2020 Award for having great coffee"
            },
            {
              "amount": "8",
              "title": "Lorem sipsum - 2018 Award for the best colleagues"
            },
            {
              "amount": "1",
              "title": "Lorem sipsum - 2019 Nominee for having great coffee"
            }
          ]
        }
      },
      {
        "bullets": {
          "items": [
            {
              "amount": "2",
              "title": "Lorem Ipsum - Award for Being the Best Around"
            },
            {
              "amount": "5",
              "title": "Lorem clicksum - the Most Clicks per Day Award"
            },
            {
              "amount": "9",
              "title": "Lorem sipsum - 2020 Award for having great coffee"
            },
            {
              "amount": "8",
              "title": "Lorem sipsum - 2018 Award for the best colleagues"
            },
            {
              "amount": "1",
              "title": "Lorem sipsum - 2019 Nominee for having great coffee"
            }
          ]
        }
      }
    ]
  }
}
  • Content: 
    .column-list {
    .text > * + & {
        margin-top: 1.5em;
    }
}

.column-list__column {
    flex: 1 1 auto;
    max-width: 100%;
    width: 100%;

    @include bp(md-min) {
        width: calc(100% / 3); /* stylelint-disable-line plugin/no-unsupported-browser-features */
    }
}
  • URL: /components/raw/column-list/column-list.scss
  • Filesystem Path: src/patterns/components/column-list/column-list.scss
  • Size: 286 Bytes
  • Handle: @column-list--default
  • Filesystem Path: src/patterns/components/column-list/column-list.twig
  • References (1): @bullets