<div class="o-container c-featured-content-callout" data-bkg-theme="base">

    <h2 class="u-sr-only">Featured journal articles</h2>
    <ul class="c-featured-content-callout__cards o-row">

        <li class="c-featured-content-callout__card o-col o-col-12">

            <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">
                            <h2 class="o-card__text-title f-title--h4">
                                <span class="u-hover-drawline">Support environmental justice</span>
                            </h2>

                            <p class="o-card__text-description f-text--small ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in, euismodos.</p>

                        </div>

                        <div class="o-card__img">

                            <img src="/images/journal/katie-rodriguez.jpg" alt="katie rodgriguez" />

                        </div>

                    </div>
                </a>

                <ul class="o-card__tags">

                    <li class="o-card__tag">
                        <a class="c-tag f-text--tag" href=#>topic tag</a>

                    </li>

                    <li class="o-card__tag">
                        <a class="c-tag f-text--tag" href=#>Environmental Justice</a>

                    </li>

                </ul>

            </div>

        </li>

        <li class="c-featured-content-callout__card o-col o-col-sm-6">

            <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">
                            <h2 class="o-card__text-title f-title--h5">
                                <span class="u-hover-drawline">Lorem ipsum dolor sit amet consectetur adipiscing</span>
                            </h2>

                            <p class="o-card__text-description f-text--small ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.</p>

                        </div>

                        <div class="o-card__img">

                            <img src="/images/journal/eel.jpg" alt="eel" />

                        </div>

                    </div>
                </a>

                <ul class="o-card__tags">

                    <li class="o-card__tag">
                        <a class="c-tag f-text--tag" href=#>topic tag</a>

                    </li>

                    <li class="o-card__tag">
                        <a class="c-tag f-text--tag" href=#>topic tag</a>

                    </li>

                </ul>

            </div>

        </li>

        <li class="c-featured-content-callout__card o-col o-col-sm-6">

            <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">
                            <h2 class="o-card__text-title f-title--h5">
                                <span class="u-hover-drawline">Dragons after dark: Seven reasons you should go</span>
                            </h2>

                            <p class="o-card__text-description f-text--small ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.</p>

                        </div>

                        <div class="o-card__img">

                            <img src="/images/journal/wizarding.jpg" alt="wizarding" />

                        </div>

                    </div>
                </a>

                <ul class="o-card__tags">

                    <li class="o-card__tag">
                        <a class="c-tag f-text--tag" href=#>topic tag</a>

                    </li>

                    <li class="o-card__tag">
                        <a class="c-tag f-text--tag" href=#>topic tag</a>

                    </li>

                </ul>

            </div>

        </li>

    </ul>
</div>
<div class="{% if not hideContainer %}o-container {% endif %}c-featured-content-callout" data-bkg-theme="base">

  <h2 class="u-sr-only">{{ title }}</h2>
  <ul class="c-featured-content-callout__cards o-row">
    {% for card in cards %}
      {% if cards|length == 2 %}
        {% set colClass = 'o-col-sm-6' %}
        {% set hSize = 'small' %}
      {% elseif cards|length == 3 %}
        {% set colClass = loop.index == 1 ? 'o-col-12' : 'o-col-sm-6' %}
        {% set hSize = loop.index == 1 ? 'normal' : 'small' %}
      {% else %}
        {% set colClass = 'o-col-12' %}
        {% set hSize = 'normal' %}
      {% endif %}
      <li class="c-featured-content-callout__card o-col {{ colClass }}">
        {% include '04-objects/card' with card|merge({hSize: hSize}) %}
      </li>
    {% endfor %}
  </ul>
</div>
{
  "pageColorTheme": "teal",
  "title": "Featured journal articles",
  "cards": [
    {
      "link": "#",
      "title": "Support environmental justice",
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in, euismodos.",
      "image": "<img src=\"/images/journal/katie-rodriguez.jpg\" alt=\"katie rodgriguez\" />",
      "tagLinks": [
        {
          "title": "topic tag",
          "link": "#"
        },
        {
          "title": "Environmental Justice",
          "link": "#"
        }
      ]
    },
    {
      "link": "#",
      "title": "Lorem ipsum dolor sit amet consectetur adipiscing",
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.",
      "image": "<img src=\"/images/journal/eel.jpg\" alt=\"eel\" />",
      "tagLinks": [
        {
          "title": "topic tag",
          "link": "#"
        },
        {
          "title": "topic tag",
          "link": "#"
        }
      ]
    },
    {
      "link": "#",
      "title": "Dragons after dark: Seven reasons you should go",
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.",
      "image": "<img src=\"/images/journal/wizarding.jpg\" alt=\"wizarding\" />",
      "tagLinks": [
        {
          "title": "topic tag",
          "link": "#"
        },
        {
          "title": "topic tag",
          "link": "#"
        }
      ]
    }
  ]
}
  • Content:
    .c-featured-content-callout {
      margin: 7rem auto;
    }
    
    .c-featured-content-callout__card {
    
      & + & {
        margin-top: 3.2rem;
    
        @include break($sm) {
          margin-top: 7.2rem;
        }
      }
    
      .o-card__text-description-title {
        max-width: 8rem;
      }
    
      .o-card__text-description {
        max-width: 55rem;
      }
    }
    
  • URL: /components/raw/featured-content-callout/featured-content-callout.scss
  • Filesystem Path: patterns\06-components\featured-content-callout\featured-content-callout.scss
  • Size: 331 Bytes

No notes defined.