D.School Component Library

Block 

<div class="c-block u-spacing">
      <figure class="o-figure c-block__image">
          <a class="o-figure__link" href="/">

              <img class="o-image" loading="lazy" src="https://picsum.photos/560/448" alt="Image Alt" />
          </a>
      </figure>
      <div class="c-block__content">
          <h3 class="o-heading c-block__heading">
              <a class="o-heading__link" href="/">
                  [Column Heading]
              </a>
          </h3>
          <div class="o-dek c-block__primary-text">
              [Primary Text 300 Char] Lorem ipsum dolor sit amet consectetur. Ut lectus eu vulputate senectus tortor hac nulla. Et semper et fermentum ut fusce enim ultricies magna arcu. Tellus eleifend lobortis pharetra sed. Quis erat facilisis vestibulum imperdiet tempor sit tortor. Non integer maecenas ullamcorper gravida consectetur.
          </div>
          <div class="o-dek c-block__secondary-text">
              [Secondary Text 300 Char] Lorem ipsum dolor sit amet consectetur. Ut lectus eu vulputate senectus tortor hac nulla. Et semper et fermentum ut fusce enim ultricies magna arcu. Tellus eleifend lobortis pharetra sed. Quis erat facilisis vestibulum imperdiet tempor sit tortor. Non integer maecenas ullamcorper gravida consectetur.
          </div>
      </div>
      <div class="c-block__footer">

          <a class="o-button o-button--secondary c-block__button has-icon" href="/">
              <span class="o-button__label">
                  [Action Text]
              </span>
              <span class="o-icon">
                  <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>
      </div>
  </div>
 
{% set base_class = block.base_class|default('c-block') %}
{% if block.link %}
  <div class="{{ bem(base_class, block.element, block.modifiers, block.extra) }} {{ block.modifiers == 'sm' ? "u-spacing--xs" : "u-spacing" }}" {{ attributes(block.attributes) }}>
    {% include "@figure" with {
      "figure": {
        "link": {
          "url": block.link.url,
          "target": block.link.target
        },
        "image": {
          "srcset": block.image.srcset,
          "src": block.image.src,
          "alt": block.image.alt,
        },
        "extra": bem(base_class, 'image')
      }
    } %}
    <div class="{{ bem(base_class, 'content') }}">
      {% include "@heading" with {
        "heading": {
          "level": "3",
          "text": block.heading,
          "link": {
            "url": block.link.url,
            "target": block.link.target
          },
          "extra": bem(base_class, 'heading')
        }
      } %}
      {% include "@dek" with {
        "dek": {
          "text": block.primary_text,
          "extra": bem(base_class, 'primary-text')
        }
      } %}
      {% include "@dek" with {
        "dek": {
          "text": block.secondary_text,
          "extra": bem(base_class, 'secondary-text')
        }
      } %}
    </div>
    <div class="{{ bem(base_class, 'footer') }}">
      {% if block.modifiers == 'sm' %}
        {% include "@link" with {
          "link": {
            "modifiers": "secondary",
            "url": block.link.url,
            "text": block.link.text,
            "arrow": "true",
            "extra": bem(base_class, 'link')
          }
        } %}
      {% else %}
        {% include "@button" with {
          "button": {
            "modifiers": "secondary",
            "url": block.link.url,
            "text": block.link.text,
            "arrow": "true",
            "extra": bem(base_class, 'button')
          }
        } %}
      {% endif %}
    </div>
  </div>
{% endif %}
 
{
  "block": {
    "heading": "[Column Heading]",
    "primary_text": "[Primary Text 300 Char] Lorem ipsum dolor sit amet consectetur. Ut lectus eu vulputate senectus tortor hac nulla. Et semper et fermentum ut fusce enim ultricies magna arcu. Tellus eleifend lobortis pharetra sed. Quis erat facilisis vestibulum imperdiet tempor sit tortor. Non integer maecenas ullamcorper gravida consectetur.",
    "secondary_text": "[Secondary Text 300 Char] Lorem ipsum dolor sit amet consectetur. Ut lectus eu vulputate senectus tortor hac nulla. Et semper et fermentum ut fusce enim ultricies magna arcu. Tellus eleifend lobortis pharetra sed. Quis erat facilisis vestibulum imperdiet tempor sit tortor. Non integer maecenas ullamcorper gravida consectetur.",
    "link": {
      "url": "/",
      "text": "[Action Text]"
    },
    "image": {
      "src": "https://picsum.photos/560/448",
      "alt": "Image Alt"
    }
  }
}
  • Content: 
    .c-block {
  &__heading {
    @include o-typography-heading--h5('secondary', 'bold');

    .c-block--sm & {
      @include o-typography-heading--h6();
    }
  }

  &__primary-text {
    @include o-typography--p1('primary');

    .c-block--sm & {
      @include o-typography-body--caption-1('primary');
    }
  }

  &__secondary-text {
    @include o-typography--p2();
  }
}
  • URL: /components/raw/block/_block.scss
  • Filesystem Path: components/02-molecules/block/_block.scss
  • Size: 373 Bytes

No notes defined.