Flexible Callout: 6 Cards

<div class="c-flexible-callout" data-bkg-theme="">
    <div class="o-container">
        <h2 id="flexible-callout-720" class="c-flexible-callout__title f-title--h3">Lorem Ipsum</h2>
        <ul class="c-flexible-callout__items c-flexible-callout__items--6 o-row" aria-labelledby="flexible-callout-720">

            <li class="c-flexible-callout__item 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">
                                <h2 class="o-card__text-title f-title--h5">
                                    <span class="u-hover-drawline">Lorem ipsum dolor sit amet</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/sample/flexible-callout-64.jpg" />

                            </div>

                        </div>
                    </a>

                </div>

            </li>

            <li class="c-flexible-callout__item 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">
                                <h2 class="o-card__text-title f-title--h5">
                                    <span class="u-hover-drawline">Lorem ipsum dolor sit amet</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/sample/flexible-callout-64.jpg" />

                            </div>

                        </div>
                    </a>

                </div>

            </li>

            <li class="c-flexible-callout__item 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">
                                <h2 class="o-card__text-title f-title--h5">
                                    <span class="u-hover-drawline">Lorem ipsum dolor sit amet</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/sample/flexible-callout-64.jpg" />

                            </div>

                        </div>
                    </a>

                </div>

            </li>

            <li class="c-flexible-callout__item 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">
                                <h2 class="o-card__text-title f-title--h5">
                                    <span class="u-hover-drawline">Lorem ipsum dolor sit amet</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/sample/flexible-callout-64.jpg" />

                            </div>

                        </div>
                    </a>

                </div>

            </li>

            <li class="c-flexible-callout__item 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">
                                <h2 class="o-card__text-title f-title--h5">
                                    <span class="u-hover-drawline">Lorem ipsum dolor sit amet</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/sample/flexible-callout-64.jpg" />

                            </div>

                        </div>
                    </a>

                </div>

            </li>

            <li class="c-flexible-callout__item 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">
                                <h2 class="o-card__text-title f-title--h5">
                                    <span class="u-hover-drawline">Lorem ipsum dolor sit amet</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/sample/flexible-callout-64.jpg" />

                            </div>

                        </div>
                    </a>

                </div>

            </li>

        </ul>
    </div>
</div>
{% set panelColorTheme = panelColorTheme ? panelColorTheme : 'base' %}
{% set hID = 'flexible-callout-' ~ random(5000) %}
{% set titleSize = items|length == 4 ? 'xsmall' : items|length < 3 ? 'normal' : 'small'  %}
{% set colClass = items|length == 4 ? 'o-col-sm-6 o-col-md-3' : items|length < 3 ? 'o-col-sm-6' : 'o-col-sm-4'  %}

<div class="c-flexible-callout" data-bkg-theme="{{ panelColorTheme }}">
  <div class="o-container">
    <h2 id="{{ hID }}" class="c-flexible-callout__title f-title--h3">{{ title }}</h2>
    <ul class="c-flexible-callout__items c-flexible-callout__items--{{ items|length }} o-row" aria-labelledby="{{ hID }}">
      {% for item in items %}
        <li class="c-flexible-callout__item o-col {{ colClass }}">
          {% include "04-objects/card" with item|merge({hSize: titleSize}) only  %}
        </li>
      {% endfor %}
    </ul>
  </div>
</div>
{
  "pageColorTheme": "teal",
  "title": "Lorem Ipsum",
  "items": [
    {
      "title": "Lorem ipsum dolor sit amet",
      "image": "<img src=\"/images/sample/flexible-callout-64.jpg\" />",
      "link": "#",
      "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."
    },
    {
      "title": "Lorem ipsum dolor sit amet",
      "image": "<img src=\"/images/sample/flexible-callout-64.jpg\" />",
      "link": "#",
      "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."
    },
    {
      "title": "Lorem ipsum dolor sit amet",
      "image": "<img src=\"/images/sample/flexible-callout-64.jpg\" />",
      "link": "#",
      "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."
    },
    {
      "title": "Lorem ipsum dolor sit amet",
      "image": "<img src=\"/images/sample/flexible-callout-64.jpg\" />",
      "link": "#",
      "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."
    },
    {
      "title": "Lorem ipsum dolor sit amet",
      "image": "<img src=\"/images/sample/flexible-callout-64.jpg\" />",
      "link": "#",
      "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."
    },
    {
      "title": "Lorem ipsum dolor sit amet",
      "image": "<img src=\"/images/sample/flexible-callout-64.jpg\" />",
      "link": "#",
      "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."
    }
  ]
}
  • Content:
    .c-flexible-callout {
      margin: 4.8rem 0;
    
      @include break($sm) {
        margin: 8.4rem 0;
      }
    
      &[data-bkg-theme="light"] {
        margin: 0;
        padding: 4.8rem 0;
    
        @include break($sm) {
          margin: 0;
          padding: 8.4rem 0;
        }
      }
    }
    
    .c-flexible-callout__items--4 {
    
      .o-card__text-description {
        @include text--xsmall;
      }
    }
    
    .c-flexible-callout__item {
      margin-top: 5.4rem;
    }
    
  • URL: /components/raw/flexible-callout/flexible-callout.scss
  • Filesystem Path: patterns\06-components\flexible-callout\flexible-callout.scss
  • Size: 421 Bytes

No notes defined.