D.School Component Library

Columns: 3 Up 

<section class="c-columns c-columns--3up l-wrap l-container--full">
      <div class="c-columns__container l-container">
          <div class="c-columns__items" data-grid="grid">
              <div data-grid="6@sm 4@lg">
                  <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>
              </div>
              <div data-grid="6@sm 4@lg">
                  <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>
              </div>
              <div data-grid="6@sm 4@lg">
                  <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>
              </div>
          </div>
      </div>
  </section>
 
{% set base_class = columns.base_class|default('c-columns') %}
{% if columns.modifiers == '6up' %}
  {% set columns_grid = "6@sm 4@md 2@lg" %}
{% elseif columns.modifiers == '4up' %}
  {% set columns_grid = "6@sm 3@lg" %}
{% else %}
  {% set columns_grid = "6@sm 4@lg" %}
{% endif %}

{% if columns.items %}
  <section class="{{ bem(base_class, columns.element, columns.modifiers, columns.extra) }} l-wrap l-container--full" {{ attributes(columns.attributes) }}>
    <div class="{{ bem(base_class, 'container') }} l-container">
      <div class="{{ bem(base_class, 'items') }}" data-grid="grid">
        {% for item in columns.items %}
        <div data-grid="{{ columns_grid }}{{ columns.modifiers == '6up' and (loop.first or loop.index == 5) ? ' offset-5@lg' }}">
          {% if columns.modifiers == '6up' %}
            {% render "@block--sm" with item %}
          {% else %}
            {% render "@block" with item %}
          {% endif %}
          </div>
        {% endfor %}
      </div>
    </div>
  </section>
{% endif %}
 
{
  "columns": {
    "modifiers": "3up",
    "items": [
      {
        "block": {}
      },
      {
        "block": {}
      },
      {
        "block": {}
      }
    ]
  }
}
  • Content: 
    /* ------------------------------------ *\
  $COLUMNS
\* ------------------------------------ */

.c-columns {
  padding-top: var(--ds-space);
  padding-bottom: var(--ds-space);

  &__items {
    position: relative;

    .c-columns--6up & {
      &::after {
        content: "";
        display: block !important;
        width: 1px;
        height: 100%;
        position: absolute;
        top: 0;
        left: calc(var(--ds-space-xs) * -1);
        background-color: var(--ds-color-gray-102);

        @include media(">large") {
          left: 33%;
        }
      }
    }
  }
}
  • URL: /components/raw/columns/_columns.scss
  • Filesystem Path: components/03-organisms/sections/columns/_columns.scss
  • Size: 583 Bytes

No notes defined.