D.School Component Library

Aside 

<aside class="c-text-block c-text-block--aside u-spacing--xs">
    <picture class="o-picture">
        <source srcset="https://picsum.photos/960/720" media="(min-width: 768px)">
        <source srcset="https://picsum.photos/768/675" media="(min-width: 480px)">
        <img class="o-image" loading="lazy" src="https://picsum.photos/480/480" alt="Alt text" />
    </picture>
    <div class="c-text-block--aside__content">
        <h4 class="o-heading o-heading--h6-primary">
            [Custom Heading]
        </h4>
        <figcaption class="o-caption c-text-block--aside__caption">
            [Custom Aside Text 100 char] velit italic, sodales vel venenatis vitae, ultrices quis risus. Aenean varius mauris vel
        </figcaption>
    </div>

    <a class="o-link o-link--secondary c-text-block--aside__link" href="/" target="_self">
        <span class="o-link__label">
            Action Text
        </span>
        <span class="o-icon transition">
            <svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                <path d="M13.3901 21.1203L14.4501 22.1803L23.1101 13.5203V11.4803L14.4501 2.82031L13.3901 3.88031L21.2601 11.7503H1.89014V13.2503H21.2601L13.3901 21.1203Z" />
            </svg>
        </span>
    </a>
</aside>
 
{% set base_class = aside.base_class|default('c-text-block--aside') %}

<aside class="c-text-block {{ bem(base_class, aside.element, aside.modifiers, aside.extra) }} u-spacing--xs" {{ attributes(aside.attributes) }}>
  {% if aside.image %}
    {% include "@picture" with {
      "image": {
        "sources": [
        {
          "media": "(min-width: 768px)",
          "srcset": "https://picsum.photos/960/720"
          },
          {
            "media": "(min-width: 480px)",
            "srcset": "https://picsum.photos/768/675"
          }
          ],
          "src": "https://picsum.photos/480/480",
          "alt": "Alt text"
        }
      } %}
  {% endif %}
  <div class="{{ bem(base_class, 'content') }}">
    {% include "@heading" with {
      "heading": {
        "level": aside.current_hlevel|default('4'),
        "text": aside.heading,
        "size": "h6-primary"
      }
    } %}
    {% include "@caption" with {
      "caption": {
        "text": aside.body,
        "extra": bem(base_class, 'caption')
      }
    } %}
  </div>
  {% if aside.action.url %}
    {% include "@link" with {
      "link": {
        "text": aside.action.text,
        "url": aside.action.url,
        "target": aside.action.target,
        "extra": bem(base_class, 'link'),
        "modifiers": "secondary",
        "arrow": true
      }
    } %}
  {% endif %}
</aside>
 
{
  "aside": {
    "image": "aside.jpg",
    "heading": "[Custom Heading]",
    "body": "[Custom Aside Text 100 char] velit italic, sodales vel venenatis vitae, ultrices quis risus. Aenean varius mauris vel",
    "action": {
      "url": "/",
      "text": "Action Text"
    }
  }
}
  • Content: 
    /* ------------------------------------*\
  $ASIDE
\*------------------------------------ */

.c-text-block--aside {
  width: 13rem;
  max-width: 100%;
  text-align: right;
  position: relative;

  img {
    display: inline;
    width: 50%;
    height: auto;
    border-radius: var(--ds-border-radius);
  }

  .o-caption { margin: 0 }

  @include media('>=large') {
    text-align: left;

    img {
      width: 100%;
    }
  }
}
  • URL: /components/raw/aside/_aside.scss
  • Filesystem Path: components/02-molecules/aside/_aside.scss
  • Size: 429 Bytes

No notes defined.