<div class="icon-step icon-step--check-email">
    <svg class="icon icon--action-mail">
  <use xlink:href="/assets/icons/icons.svg#action-mail"></use>
</svg>

    <span class="icon-step__details"><strong>Check your email</strong> johndoe@email.com for further instructions.</span>
</div>
<div class="icon-step{{#if modifier}} icon-step--{{modifier}}{{/if}}">
  {{render (dynamicVariant 'icons' icon)}}
  <span class="icon-step__details">{{{details}}}</span>
</div>
{
  "icon": "action-mail",
  "details": "<strong>Check your email</strong> johndoe@email.com for further instructions.",
  "modifier": "check-email"
}
  • Content:
    .icon-step {
      display: flex;
      align-items: center;
      margin-bottom: $gutter-width;
    
      @include breakpoint($breakpoint-xl) {
        align-items: flex-start;
      }
    
      .icon {
        min-width: $gutter-width;
        min-height: $gutter-width;
        margin-right: $gutter-width / 2;
        fill: $color-medium-dark;
      }
    }
    
    .icon-step__details {
      font-size: 1.4rem;
      line-height: 2.0rem;
    }
    
  • URL: /components/raw/icon-step/icon-step.scss
  • Filesystem Path: src/components/01-elements/text-blocks/icon-step/icon-step.scss
  • Size: 373 Bytes
  • Handle: @icon-step
  • Preview:
  • Filesystem Path: src/components/01-elements/text-blocks/icon-step/icon-step.html

There are no notes for this item.