Columns: 6 Up

WIP

HTML
View
Context
Assets
Info
Notes


        
        <section class="c-columns c-columns--6up 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@md 2@lg offset-5@lg">
                  <div class="c-block c-block--sm u-spacing--xs">
                      <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">
                              [Max 200 Char]Lorem ipsum dolor sit amet consectetur. Vulputate augue maecenas fermentum aliquam mi dolor et. Libero pulvinar diam molestie eu. Molestie eu odio donec imperdiet volutpat sem non odio in pellentesque.
                          </div>
                      </div>
                      <div class="c-block__footer">

                          <a class="o-link o-link--secondary c-block__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>
                      </div>
                  </div>
              </div>
              <div data-grid="6@sm 4@md 2@lg">
                  <div class="c-block c-block--sm u-spacing--xs">
                      <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">
                              [Max 200 Char]Lorem ipsum dolor sit amet consectetur. Vulputate augue maecenas fermentum aliquam mi dolor et. Libero pulvinar diam molestie eu. Molestie eu odio donec imperdiet volutpat sem non odio in pellentesque.
                          </div>
                      </div>
                      <div class="c-block__footer">

                          <a class="o-link o-link--secondary c-block__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>
                      </div>
                  </div>
              </div>
              <div data-grid="6@sm 4@md 2@lg">
                  <div class="c-block c-block--sm u-spacing--xs">
                      <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">
                              [Max 200 Char]Lorem ipsum dolor sit amet consectetur. Vulputate augue maecenas fermentum aliquam mi dolor et. Libero pulvinar diam molestie eu. Molestie eu odio donec imperdiet volutpat sem non odio in pellentesque.
                          </div>
                      </div>
                      <div class="c-block__footer">

                          <a class="o-link o-link--secondary c-block__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>
                      </div>
                  </div>
              </div>
              <div data-grid="6@sm 4@md 2@lg">
                  <div class="c-block c-block--sm u-spacing--xs">
                      <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">
                              [Max 200 Char]Lorem ipsum dolor sit amet consectetur. Vulputate augue maecenas fermentum aliquam mi dolor et. Libero pulvinar diam molestie eu. Molestie eu odio donec imperdiet volutpat sem non odio in pellentesque.
                          </div>
                      </div>
                      <div class="c-block__footer">

                          <a class="o-link o-link--secondary c-block__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>
                      </div>
                  </div>
              </div>
              <div data-grid="6@sm 4@md 2@lg offset-5@lg">
                  <div class="c-block c-block--sm u-spacing--xs">
                      <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">
                              [Max 200 Char]Lorem ipsum dolor sit amet consectetur. Vulputate augue maecenas fermentum aliquam mi dolor et. Libero pulvinar diam molestie eu. Molestie eu odio donec imperdiet volutpat sem non odio in pellentesque.
                          </div>
                      </div>
                      <div class="c-block__footer">

                          <a class="o-link o-link--secondary c-block__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>
                      </div>
                  </div>
              </div>
              <div data-grid="6@sm 4@md 2@lg">
                  <div class="c-block c-block--sm u-spacing--xs">
                      <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">
                              [Max 200 Char]Lorem ipsum dolor sit amet consectetur. Vulputate augue maecenas fermentum aliquam mi dolor et. Libero pulvinar diam molestie eu. Molestie eu odio donec imperdiet volutpat sem non odio in pellentesque.
                          </div>
                      </div>
                      <div class="c-block__footer">

                          <a class="o-link o-link--secondary c-block__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>
                      </div>
                  </div>
              </div>
              <div data-grid="6@sm 4@md 2@lg">
                  <div class="c-block c-block--sm u-spacing--xs">
                      <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">
                              [Max 200 Char]Lorem ipsum dolor sit amet consectetur. Vulputate augue maecenas fermentum aliquam mi dolor et. Libero pulvinar diam molestie eu. Molestie eu odio donec imperdiet volutpat sem non odio in pellentesque.
                          </div>
                      </div>
                      <div class="c-block__footer">

                          <a class="o-link o-link--secondary c-block__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>
                      </div>
                  </div>
              </div>
              <div data-grid="6@sm 4@md 2@lg">
                  <div class="c-block c-block--sm u-spacing--xs">
                      <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">
                              [Max 200 Char]Lorem ipsum dolor sit amet consectetur. Vulputate augue maecenas fermentum aliquam mi dolor et. Libero pulvinar diam molestie eu. Molestie eu odio donec imperdiet volutpat sem non odio in pellentesque.
                          </div>
                      </div>
                      <div class="c-block__footer">

                          <a class="o-link o-link--secondary c-block__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>
                      </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": "6up",
    "items": [
      {
        "block": {}
      },
      {
        "block": {}
      },
      {
        "block": {}
      },
      {
        "block": {}
      },
      {
        "block": {}
      },
      {
        "block": {}
      },
      {
        "block": {}
      },
      {
        "block": {}
      }
    ]
  }
}

File:

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

Handle: @columns--6up
Variants (4): Default , 3 Up , 4 Up , 6 Up
Preview:
- With layout
- Component only
Filesystem Path: components/03-organisms/sections/columns/columns.twig
References (2): @block--sm, @block

No notes defined.