Copy environment

Bullets 

    <ul class="bullets  ">
        <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>
 
{% if data.items %}
    <ul class="bullets {{ class }} {{ modifier }}">
        {% for item in data.items %}
            <li class="bullets__list-item">
                <span class="bullets__list-amount">{% if item.amount %}{{ item.amount }}&nbsp;{% endif %}&#10042;</span>{{ item.title }}
            </li>
        {% endfor %}
    </ul>
{% endif %}

{
  "language": "en-US",
  "data": {
    "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: 
    .bullets {
    padding-left: 25px;

    @include bp(sm-min) {
        padding-left: 40px;
    }
}

.bullets__list-item {
    position: relative;
    padding-left: 14px;
    margin-bottom: 16px;

    @include bp(sm-min) {
        padding-left: 6px;
    }
}

.bullets__list-amount {
    position: absolute;
    top: 0;
    left: -44px;
    text-align: right;
    width: 50px;

    @include bp(sm-min) {
        left: -60px;
        width: 60px;
    }
}

.bullets--numberless {
    .bullets__list-item {
        padding-left: 32px;
    }
}
  • URL: /components/raw/bullets/bullets.scss
  • Filesystem Path: src/patterns/components/bullets/bullets.scss
  • Size: 537 Bytes
  • Handle: @bullets--default
  • Filesystem Path: src/patterns/components/bullets/bullets.twig
  • Referenced by (1): @column-list

Numberless 

    <ul class="bullets  bullets--numberless">
        <li class="bullets__list-item">
            <span class="bullets__list-amount">&#10042;</span>Lorem pitsum - 2020 award for the best peaches in the region
        </li>
        <li class="bullets__list-item">
            <span class="bullets__list-amount">&#10042;</span>Lorem sitsum - 2018 nominee for the best couches in the country
        </li>
        <li class="bullets__list-item">
            <span class="bullets__list-amount">&#10042;</span>Lorem supsum - 2020 summer award for the best SUP board event of the summer
        </li>
    </ul>
 
{% if data.items %}
    <ul class="bullets {{ class }} {{ modifier }}">
        {% for item in data.items %}
            <li class="bullets__list-item">
                <span class="bullets__list-amount">{% if item.amount %}{{ item.amount }}&nbsp;{% endif %}&#10042;</span>{{ item.title }}
            </li>
        {% endfor %}
    </ul>
{% endif %}

{
  "language": "en-US",
  "data": {
    "items": [
      {
        "title": "Lorem pitsum - 2020 award for the best peaches in the region"
      },
      {
        "title": "Lorem sitsum - 2018 nominee for the best couches in the country"
      },
      {
        "title": "Lorem supsum - 2020 summer award for the best SUP board event of the summer"
      }
    ]
  },
  "modifier": "bullets--numberless"
}
  • Content: 
    .bullets {
    padding-left: 25px;

    @include bp(sm-min) {
        padding-left: 40px;
    }
}

.bullets__list-item {
    position: relative;
    padding-left: 14px;
    margin-bottom: 16px;

    @include bp(sm-min) {
        padding-left: 6px;
    }
}

.bullets__list-amount {
    position: absolute;
    top: 0;
    left: -44px;
    text-align: right;
    width: 50px;

    @include bp(sm-min) {
        left: -60px;
        width: 60px;
    }
}

.bullets--numberless {
    .bullets__list-item {
        padding-left: 32px;
    }
}
  • URL: /components/raw/bullets/bullets.scss
  • Filesystem Path: src/patterns/components/bullets/bullets.scss
  • Size: 537 Bytes
  • Handle: @bullets--numberless
  • Filesystem Path: src/patterns/components/bullets/bullets.twig