@e-fellows/website-2022

Icon mit Text 

<div class="icon-with-text">
    <svg class="icon icon--bell icon-with-text__icon" viewBox="0 0 200 200" aria-hidden="true">
        <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#bell"></use>
    </svg>
    <div class="icon-with-text__text">
        <p class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>

    </div>
</div>
 
<div {{ html_attributes({
  class: 'icon-with-text',
  id: id ?? false,
}, attrs ?? {}) }}>
  {% include '@icon' with {
    class: 'icon-with-text__icon',
    icon: icon,
  } only %}

  <div class="icon-with-text__text">
    {{ text | componentize }}
  </div>
</div>
 
{
  "icon": "bell"
}
  • Content: 
    :root {
  --icon-with-text-color: currentColor;
  --icon-with-text-icon-color: currentColor;
}

.icon-with-text {
  color: var(--icon-with-text-color);
  display: flex;
  gap: 1em;
}

.icon-with-text__icon {
  color: var(--icon-with-text-icon-color);
  flex-shrink: 0;
  font-size: 1.6em;

  @include mq($from: m) {
    font-size: 2.7em;
  }
}

.icon-with-text__text {
  align-self: center;
  flex-grow: 2;
  line-height: var(--line-height-body);

  > * + * {
    margin-block-start: 2rem;
  }
}
  • URL: /components/raw/icon-with-text/icon-with-text.scss
  • Filesystem Path: src/components/2-molecules/icon-with-text/icon-with-text.scss
  • Size: 496 Bytes

No notes defined.