University of Staffordshire Pattern Library

Callout

Possible use for this component includes entry requirements and fee information on course pages.

<div class="grid  grid-4-cols">

    <div>
        <article class="callout  callout--bg-neon">
            <h2 class="callout__title">BBC</h2>
            <p class="callout__content">112 UCAS points</p>
        </article>
    </div>

    <div>
        <article class="callout  callout--bg-dark-blue">
            <h2 class="callout__title">BBC</h2>
            <p class="callout__content">112 UCAS points</p>
        </article>
    </div>

    <div>
        <article class="callout  callout--bg-burgundy">
            <h2 class="callout__title">BBC</h2>
            <p class="callout__content">112 UCAS points</p>
        </article>
    </div>

    <div>
        <article class="callout  callout--bg-digital-blue">
            <h2 class="callout__title">BBC</h2>
            <p class="callout__content">112 UCAS points</p>
        </article>
    </div>

    <div>
        <article class="callout  callout--bg-teal">
            <h2 class="callout__title">BBC</h2>
            <p class="callout__content">112 UCAS points</p>
        </article>
    </div>

</div>
 
{% set bgClasses = ['neon', 'dark-blue', 'burgundy', 'digital-blue', 'teal'] %}
<div class="grid  grid-4-cols">
    {% for bgClass in bgClasses %}
    <div>
        <article class="callout  callout--bg-{{ bgClass }}">
            <h2 class="callout__title">BBC</h2>
            <p class="callout__content">112 UCAS points</p>
        </article>
    </div>
    {% endfor %}
</div>
  • Content: 
    .callout {
    text-align: center;
    padding: $spacing-md;
    margin-bottom: $spacing-lg;

    & p, & h2 {
        margin: 0;
    }

    @each $name, $value in $callout-bg-colors {
        &--bg-#{$name} {
          background-color: #{$value};
          @if (choose-contrast-color($value) == white) {
            color: white;
            & h2 {
              color: white;
            }
          }
        }
      }
}
  • URL: /components/raw/callout/_callout.scss
  • Filesystem Path: src\components\callout\_callout.scss
  • Size: 443 Bytes