<div class="c-multi-column-callout" data-bkg-theme="dark">
    <div class="o-container">
        <div class="c-multi-column-callout__text c-multi-column-callout__text--space  o-row">
            <div class="c-multi-column-callout__text-content o-col o-col-sm-8">
                <h2 id="multi-column-callout-3665" class="c-multi-column-callout__text-title f-title--h3">In the Field</h2>

                <p class="c-multi-column-callout__text-description">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit nemo deleniti saepe tenetur libero id qui, corrupti deserunt.</p>

            </div>

        </div>

        <ul class="c-multi-column-callout__cards o-row" aria-labelledby="multi-column-callout-3665">

            <li class="c-multi-column-callout__card o-col o-col-sm-4">

                <div class="o-card o-card">
                    <a class="o-card__link u-hover-grow-image" href="#">
                        <div class="o-card__content">
                            <div class="o-card__text">
                                <h3 class="o-card__text-title f-title--h5">
                                    <span class="u-hover-drawline">Delaware Watershed Initiative</span>
                                </h3>

                                <p class="o-card__text-description f-text--small ">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit nemo deleniti saepe tenetur libero id qui, corrupti deserunt.</p>

                            </div>

                            <div class="o-card__img">

                                <img src="/images/homepage/Data_TheDelaware.jpg" alt="image of woman in a lake" />

                            </div>

                        </div>
                    </a>

                </div>

            </li>

            <li class="c-multi-column-callout__card o-col o-col-sm-4">

                <div class="o-card o-card">
                    <a class="o-card__link u-hover-grow-image" href="#">
                        <div class="o-card__content">
                            <div class="o-card__text">
                                <h3 class="o-card__text-title f-title--h5">
                                    <span class="u-hover-drawline">Delaware Watershed Initiative</span>
                                </h3>

                                <p class="o-card__text-description f-text--small ">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit nemo deleniti saepe tenetur libero id qui, corrupti deserunt.</p>

                            </div>

                            <div class="o-card__img">

                                <img src="/images/homepage/Data_TheDelaware.jpg" alt="image of woman in a lake" />

                            </div>

                        </div>
                    </a>

                </div>

            </li>

            <li class="c-multi-column-callout__card o-col o-col-sm-4">

                <div class="o-card o-card">
                    <a class="o-card__link u-hover-grow-image" href="#">
                        <div class="o-card__content">
                            <div class="o-card__text">
                                <h3 class="o-card__text-title f-title--h5">
                                    <span class="u-hover-drawline">Delaware Watershed Initiative</span>
                                </h3>

                                <p class="o-card__text-description f-text--small ">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit nemo deleniti saepe tenetur libero id qui, corrupti deserunt.</p>

                            </div>

                            <div class="o-card__img">

                                <img src="/images/homepage/Data_TheDelaware.jpg" alt="image of woman in a lake" />

                            </div>

                        </div>
                    </a>

                </div>

            </li>

            <li class="c-multi-column-callout__card o-col o-col-sm-4">

                <div class="o-card o-card">
                    <a class="o-card__link u-hover-grow-image" href="#">
                        <div class="o-card__content">
                            <div class="o-card__text">
                                <h3 class="o-card__text-title f-title--h5">
                                    <span class="u-hover-drawline">Delaware Watershed Initiative</span>
                                </h3>

                                <p class="o-card__text-description f-text--small ">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit nemo deleniti saepe tenetur libero id qui, corrupti deserunt.</p>

                            </div>

                            <div class="o-card__img">

                                <img src="/images/homepage/Data_TheDelaware.jpg" alt="image of woman in a lake" />

                            </div>

                        </div>
                    </a>

                </div>

            </li>

            <li class="c-multi-column-callout__card o-col o-col-sm-4">

                <div class="o-card o-card">
                    <a class="o-card__link u-hover-grow-image" href="#">
                        <div class="o-card__content">
                            <div class="o-card__text">
                                <h3 class="o-card__text-title f-title--h5">
                                    <span class="u-hover-drawline">Delaware Watershed Initiative</span>
                                </h3>

                                <p class="o-card__text-description f-text--small ">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit nemo deleniti saepe tenetur libero id qui, corrupti deserunt.</p>

                            </div>

                            <div class="o-card__img">

                                <img src="/images/homepage/Data_TheDelaware.jpg" alt="image of woman in a lake" />

                            </div>

                        </div>
                    </a>

                </div>

            </li>

            <li class="c-multi-column-callout__card o-col o-col-sm-4">

                <div class="o-card o-card">
                    <a class="o-card__link u-hover-grow-image" href="#">
                        <div class="o-card__content">
                            <div class="o-card__text">
                                <h3 class="o-card__text-title f-title--h5">
                                    <span class="u-hover-drawline">Delaware Watershed Initiative</span>
                                </h3>

                                <p class="o-card__text-description f-text--small ">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit nemo deleniti saepe tenetur libero id qui, corrupti deserunt.</p>

                            </div>

                            <div class="o-card__img">

                                <img src="/images/homepage/Data_TheDelaware.jpg" alt="image of woman in a lake" />

                            </div>

                        </div>
                    </a>

                </div>

            </li>

        </ul>
    </div>
</div>
{% set panelColorTheme = panelColorTheme ? panelColorTheme : 'base' %}
{% set hID = 'multi-column-callout-' ~ random(5000) %}
{% set idAttr = id is defined and id ? 'id="' ~ id ~ '"' : '' %}

<div {{ idAttr }} class="c-multi-column-callout" data-bkg-theme="{{ panelColorTheme }}">
  <div class="o-container">
    <div class="c-multi-column-callout__text{% if not hiddenTitle or description or primaryCtaLink %} c-multi-column-callout__text--space {% endif %} o-row">
      <div class="c-multi-column-callout__text-content o-col o-col-sm-8">
        <h2 id="{{ hID }}" class="{% if hiddenTitle %}u-sr-only{% else %}c-multi-column-callout__text-title f-title--h3{% endif %}">{{ title }}</h2>
        {% if description %}
          <p class="c-multi-column-callout__text-description">{{description}}</p>
        {% endif %}
      </div>
      {% if primaryCtaLink %}
        <div class="c-multi-column-callout__text-cta o-col o-col-sm-4">
          <a href="{{ primaryCtaLink }}" class="c-multi-column-callout__text-cta-link o-btn o-btn--expanding-arrow">
            {{ primaryCtaTitle }}
            <span class="o-btn__icon" aria-hidden="true">{% include "03-icons/cta-expanding-arrow" %}</span>
          </a>
        </div>
      {% endif %}
    </div>

    <ul class="c-multi-column-callout__cards o-row" aria-labelledby="{{ hID }}">
      {% for card in cards %}
        {% if
            (cards.length == 3 or cards.length == 6) or
            (cards.length == 5 and loop.index > 2)
        %}
          {% set titleSize = 'small' %}
          <li class="c-multi-column-callout__card o-col o-col-sm-4">
        {% elseif cards.length == 4 %}
          {% if loop.first %}
            <li class="c-multi-column-callout__card c-multi-column-callout__card--horizontal o-col">
          {% else %}
            {% set titleSize = 'small' %}
            <li class="c-multi-column-callout__card o-col o-col-sm-4">
          {% endif %}
        {% else %}
          {% set titleSize = 'large' %}
          <li class="c-multi-column-callout__card o-col o-col-sm-6">
        {% endif %}

        {% if cards.length == 4 %}
          {% if loop.first %}
            {% include '05-objects/horizontal-card' with card|merge({hideContainer: true}) %}
          {% else %}
            {% include '05-objects/card' with card|merge({hSize: titleSize}) %}
          {% endif %}
        {% else %}
          {% include '05-objects/card' with card|merge({hSize: titleSize}) %}
        {% endif %}
        </li>
      {% endfor %}
    </ul>
  </div>
</div>
{
  "pageColorTheme": "teal",
  "title": "In the Field",
  "description": "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit nemo deleniti saepe tenetur libero id qui, corrupti deserunt.",
  "panelColorTheme": "dark",
  "cards": [
    {
      "title": "Delaware Watershed Initiative",
      "image": "<img src=\"/images/homepage/Data_TheDelaware.jpg\" alt=\"image of woman in a lake\" />",
      "link": "#",
      "hTag": "h3"
    },
    {
      "title": "Delaware Watershed Initiative",
      "image": "<img src=\"/images/homepage/Data_TheDelaware.jpg\" alt=\"image of woman in a lake\" />",
      "link": "#",
      "hTag": "h3"
    },
    {
      "title": "Delaware Watershed Initiative",
      "image": "<img src=\"/images/homepage/Data_TheDelaware.jpg\" alt=\"image of woman in a lake\" />",
      "link": "#",
      "hTag": "h3"
    },
    {
      "title": "Delaware Watershed Initiative",
      "image": "<img src=\"/images/homepage/Data_TheDelaware.jpg\" alt=\"image of woman in a lake\" />",
      "link": "#",
      "hTag": "h3"
    },
    {
      "title": "Delaware Watershed Initiative",
      "image": "<img src=\"/images/homepage/Data_TheDelaware.jpg\" alt=\"image of woman in a lake\" />",
      "link": "#",
      "hTag": "h3"
    },
    {
      "title": "Delaware Watershed Initiative",
      "image": "<img src=\"/images/homepage/Data_TheDelaware.jpg\" alt=\"image of woman in a lake\" />",
      "link": "#",
      "hTag": "h3"
    }
  ]
}
  • Content:
    .c-multi-column-callout {
      margin: 7.2rem 0;
    
      @include break($sm){
        margin: 11.2rem 0;
      }
    
      &[data-bkg-theme="light"] {
        margin: 0;
        padding: 7.2rem 0;
    
        @include break($sm){
          margin: 0;
          padding: 11.2rem 0;
        }
      }
    }
    
    .c-multi-column-callout__text {
      align-items: flex-end;
    }
    
    .c-multi-column-callout__text--space {
      margin-bottom: 3.4rem;
    }
    
    .c-multi-column-callout__text-title {
      margin-bottom: 1.2rem;
    }
    
    .c-multi-column-callout__text-cta {
      margin-top: 2.4rem;
    
      @include break($sm) {
        margin-top: 0;
        text-align: right;
      }
    }
    
    .c-multi-column-callout__card {
      margin-bottom: 7.8rem;
    
      &.c-multi-column-callout__card--horizontal {
    
        @include break($sm) {
          margin-bottom: 3.2rem;
        }
      }
    }
    
  • URL: /components/raw/multi-column-callout/multi-column-callout.scss
  • Filesystem Path: patterns\06-components\multi-column-callout\multi-column-callout.scss
  • Size: 795 Bytes

No notes defined.