Staffordshire University Components

Cards: Flex Overlap

There are no notes for this item.

<p>Add a class of <code>card--flex-overlap</code> to have a card's figure and content size themselves intrinsically with flexbox, <strong>when using a highlighted title</strong> style. The title is overlapped on the figure (when the figure sits above). This is particularly useful for cards in single columns (like search results), and grids of 3, which look awkwardly large otherwise at a tablet-ish width, when they fall to a single column.</p>

<hr />

<div class="card  card--flex-overlap  card--maroon">
    <figure class="card__figure">
        <img src="https://placeimg.com/720/360" alt="" />
    </figure>

    <div class="card__content">
        <div class="title">
            <h3 class="h4  title__highlight"><a href="" class="">Graduates give Staffs Uni star role in popular app</a></h3>
        </div>
        <p>Staffordshire University is going global with a programme packed full of free events to start the new decade.</p>
    </div>
</div>

<div class="card  card--flex-overlap  card--pink">
    <figure class="card__figure">
        <img src="https://placeimg.com/720/360" alt="" />
    </figure>

    <div class="card__content">
        <a href="" class="link--stretched">
            <div class="title">
                <h3 class="h4  title__highlight">Enjoying the View? How computer games can help evaluate landscapes</h3>
            </div>
        </a>
        <p>2020 marks the International Year of the Nurse and Midwife, and Staffordshire University is joining colleagues across the globe to shine a spotlight on the sector. Celebrations kick off with a talk this week by Visiting Professor Ann-Marie Cannaby, Chief Nurse at the Royal Wolverhampton Hospital, at the University’s Centre of Excellence in Healthcare Education, Stafford.Two hundred years may have passed since the birth of Florence Nightingale, but patient care and safety remain the most important influencing factors within the fields of nursing and midwifery. Professor Cannaby will use her keynote presentation to explore curriculum developments.</p>
    </div>
</div>

<div class="card  card--flex-overlap  card--red">

    <div class="card__content">
        <a href="" class="link--stretched">
            <div class="title">
                <h3 class="h4  title__highlight">Enjoying the View? How computer games can help evaluate landscapes</h3>
            </div>
        </a>
        <p>Example without a figure image</p>
        <p>The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.</p>
    </div>
</div>

<hr />

<div class="grid  grid-2-cols  grid-4-cols@desktop">

    <div>
        <div class="card  card--flex-overlap  card--maroon">
            <figure class="card__figure  card__figure--video">
                <img src="https://placeimg.com/480/240/people" alt="" />
            </figure>

            <div class="card__content">
                <a href="#" class="link--stretched">
                    <div class="title">
                        <h3 class="h5  title__highlight">Research into poverty in Stoke-on-Trent gets new funding boost</h3>
                    </div>
                </a>
                <p><span class="tag">video</span></p>
                <p>Adding a class of <code>card__figure--video</code> to a figure will give it a play icon overlay.</p>
            </div>
        </div>
    </div>

    <div>
        <div class="card  card--flex-overlap  card--slate">
            <figure class="card__figure">
                <img src="https://placeimg.com/480/240/tech" alt="" />
            </figure>

            <div class="card__content">
                <a href="#" class="link--stretched">
                    <div class="title">
                        <h3 class="h5  title__highlight">Graduates give Staffs Uni star role in popular app</h3>
                    </div>
                </a>
                <p><span class="tag">blog</span></p>
                <p>
                    <time class="strong">11 February 2020</time>
                </p>
                <p>University's pioneering work with community researchers will help inform new model of community research.</p>
            </div>
        </div>
    </div>

    <div>
        <div class="card  card--flex-overlap  card--red">
            <figure class="card__figure">
                <img src="https://placeimg.com/480/240/nature" alt="" />
            </figure>

            <div class="card__content">
                <a href="#" class="link--stretched">
                    <div class="title">
                        <h3 class="h5  title__highlight">“It's Beautiful to be Old” Professor tells Vatican</h3>
                    </div>
                </a>
                <p><span class="tag">blog</span></p>
                <p>
                    <time class="strong">10 August 2020</time>
                </p>
                <p>University's pioneering work with community researchers will help inform new model of community research.</p>
            </div>
        </div>
    </div>

    <div>
        <div class="card  card--flex-overlap  card--pink">
            <figure class="card__figure">
                <img src="https://placeimg.com/480/240/people" alt="" />
            </figure>

            <div class="card__content">
                <a href="#" class="link--stretched">
                    <div class="title">
                        <h3 class="h5  title__highlight">Research into poverty in Stoke-on-Trent gets new funding boost</h3>
                    </div>
                </a>
                <p><span class="tag">blog</span></p>
                <p>
                    <time class="strong">9 April 2020</time>
                </p>
                <p>University's pioneering work with community researchers will help inform new model of community research.</p>
            </div>
        </div>
    </div>
</div>

<hr />

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

    <div>
        <div class="card  card--flex-overlap  card--red">
            <figure class="card__figure">
                <img src="https://placeimg.com/480/480/tech" alt="" />
            </figure>

            <div class="card__content">
                <a href="#" class="link--stretched">
                    <div class="title">
                        <h3 class="h5  title__highlight">Accommodation</h3>
                    </div>
                </a>
                <p>Where you live is a big part of your student experience and where you’ll make friends for life.</p>
            </div>
        </div>
    </div>

    <div>
        <div class="card  card--flex-overlap  card--maroon">
            <figure class="card__figure">
                <img src="https://placeimg.com/480/480/nature" alt="" />
            </figure>

            <div class="card__content">
                <a href="#" class="link--stretched">
                    <div class="title">
                        <h3 class="h5  title__highlight">Staffordshire Campus</h3>
                    </div>
                </a>
                <p>There’ll be times when you need some support - and we’re here for you. There are many student support services - from welfare to money matters.</p>
            </div>
        </div>
    </div>

    <div>
        <a class="card  card--flex-overlap  card--red" href="">
            <figure class="card__figure">
                <img src="https://placeimg.com/480/240/people" alt="" />
            </figure>

            <div class="card__content">
                <div class="title">
                    <h3 class="h5  title__highlight">Stoke-on-Trent Open Day Programme</h3>
                </div>
                <p><span class="tag">publication</span></p>
                <p>Download our open day PDF (2.8Mb)</p>
                <b class="button">Download</b>
            </div>
        </a>
    </div>
</div>
 
<p>Add a class of <code>card--flex-overlap</code> to have a card's figure and content size themselves intrinsically with flexbox, <strong>when using a highlighted title</strong> style. The title is overlapped on the figure (when the figure sits above). This is particularly useful for cards in single columns (like search results), and grids of 3, which look awkwardly large otherwise at a tablet-ish width, when they fall to a single column.</p>

<hr/>

<div class="card  card--flex-overlap  card--maroon">
  <figure class="card__figure">
    <img src="https://placeimg.com/720/360" alt=""/>
  </figure>

  <div class="card__content">
    <div class="title">
      <h3 class="h4  title__highlight"><a href="" class="">{{ placeholderHeadline }}</a></h3>
    </div>
    <p>{{ placeholderPara2 }}</p>
  </div>
</div>

<div class="card  card--flex-overlap  card--pink">
  <figure class="card__figure">
    <img src="https://placeimg.com/720/360" alt=""/>
  </figure>

  <div class="card__content">
    <a href="" class="link--stretched">
      <div class="title">
        <h3 class="h4  title__highlight">{{ placeholderHeadline2 }}</h3>
      </div>
    </a>
    <p>{{ placeholderPara3 }}</p>
  </div>
</div>

<div class="card  card--flex-overlap  card--red">

  <div class="card__content">
    <a href="" class="link--stretched">
      <div class="title">
        <h3 class="h4  title__highlight">{{ placeholderHeadline2 }}</h3>
      </div>
    </a>
    <p>Example without a figure image</p>
    <p>{{ placeholderPara1 }}</p>
  </div>
</div>

<hr/>


<div class="grid  grid-2-cols  grid-4-cols@desktop">

  <div>
    <div class="card  card--flex-overlap  card--maroon">
      <figure class="card__figure  card__figure--video">
        <img src="https://placeimg.com/480/240/people" alt=""/>
      </figure>

      <div class="card__content">
        <a href="#" class="link--stretched">
          <div class="title">
            <h3 class="h5  title__highlight">Research into poverty in Stoke-on-Trent gets new funding boost</h3>
          </div>
        </a>
        <p><span class="tag">video</span></p>
        <p>Adding a class of <code>card__figure--video</code> to a figure will give it a play icon overlay.</p>
      </div>
    </div>
  </div>

  <div>
    <div class="card  card--flex-overlap  card--slate">
      <figure class="card__figure">
        <img src="https://placeimg.com/480/240/tech" alt=""/>
      </figure>

      <div class="card__content">
        <a href="#" class="link--stretched">
          <div class="title">
            <h3 class="h5  title__highlight">Graduates give Staffs Uni star role in popular app</h3>
          </div>
        </a>
        <p><span class="tag">blog</span></p>
        <p>
          <time class="strong">11 February 2020</time>
        </p>
        <p>University's pioneering work with community researchers will help inform new model of community research.</p>
      </div>
    </div>
  </div>

  <div>
    <div class="card  card--flex-overlap  card--red">
      <figure class="card__figure">
        <img src="https://placeimg.com/480/240/nature" alt=""/>
      </figure>

      <div class="card__content">
        <a href="#" class="link--stretched">
          <div class="title">
            <h3 class="h5  title__highlight">“It's Beautiful to be Old” Professor tells Vatican</h3>
          </div>
        </a>
        <p><span class="tag">blog</span></p>
        <p>
          <time class="strong">10 August 2020</time>
        </p>
        <p>University's pioneering work with community researchers will help inform new model of community research.</p>
      </div>
    </div>
  </div>

  <div>
    <div class="card  card--flex-overlap  card--pink">
      <figure class="card__figure">
        <img src="https://placeimg.com/480/240/people" alt=""/>
      </figure>

      <div class="card__content">
        <a href="#" class="link--stretched">
          <div class="title">
            <h3 class="h5  title__highlight">Research into poverty in Stoke-on-Trent gets new funding boost</h3>
          </div>
        </a>
        <p><span class="tag">blog</span></p>
        <p>
          <time class="strong">9 April 2020</time>
        </p>
        <p>University's pioneering work with community researchers will help inform new model of community research.</p>
      </div>
    </div>
  </div>
</div>

<hr/>

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

  <div>
    <div class="card  card--flex-overlap  card--red">
      <figure class="card__figure">
        <img src="https://placeimg.com/480/480/tech" alt=""/>
      </figure>

      <div class="card__content">
        <a href="#" class="link--stretched">
          <div class="title">
            <h3 class="h5  title__highlight">Accommodation</h3>
          </div>
        </a>
        <p>Where you live is a big part of your student experience and where you’ll make friends for life.</p>
      </div>
    </div>
  </div>

  <div>
    <div class="card  card--flex-overlap  card--maroon">
      <figure class="card__figure">
        <img src="https://placeimg.com/480/480/nature" alt=""/>
      </figure>

      <div class="card__content">
        <a href="#" class="link--stretched">
          <div class="title">
            <h3 class="h5  title__highlight">Staffordshire Campus</h3>
          </div>
        </a>
        <p>There’ll be times when you need some support - and we’re here for you. There are many student support services - from welfare to money matters.</p>
      </div>
    </div>
  </div>

  <div>
    <a class="card  card--flex-overlap  card--red" href="">
      <figure class="card__figure">
        <img src="https://placeimg.com/480/240/people" alt=""/>
      </figure>

      <div class="card__content">
        <div class="title">
          <h3 class="h5  title__highlight">Stoke-on-Trent Open Day Programme</h3>
        </div>
        <p><span class="tag">publication</span></p>
        <p>Download our open day PDF (2.8Mb)</p>
        <b class="button">Download</b>
      </div>
    </a>
  </div>
</div>
  • Content: 
    $card__internal-spacing: $spacing-sm;

.card {
  // $theme-colours: see __vars/colours

  display: block;
  position: relative;
  --accent-color: #{$primary};
  margin-bottom: $spacing-xl;
  border-left: $border-accent-width solid $primary;
  border-color: var(--accent-color);
  @include clearfix;

  a:not(.button) {
    text-decoration: none;
    border-bottom: none;

    &:hover {
      text-decoration: underline;
    }
  }

  p {
    margin-bottom: $card__internal-spacing;
  }

  &__content {
    padding: 0 calc(#{$card__internal-spacing} + 2.5%);

    > :first-child {
      margin-top: 0;
    }

    > :last-child {
      margin-bottom: 0;
    }
  }

  &__title {
    margin-top: 0;
    margin-bottom: $spacing-md;

    a {
      color: #{$primary};
      color: var(--accent-color);
    }
  }

  &__figure {
    &--video {
      position: relative;

      &:after {
        content: '';
        position: absolute;
        width: $spacing-4xl;
        height: $spacing-4xl;
        max-width: 50%;
        max-height: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: url('#{$image-theme-directory-icon}/icon-play-circle-neutral-light.svg') no-repeat center center;
        background-size: contain;
        z-index: 1;
        pointer-events: none;
      }
    }
  }

  //--  Child elements affected by accent colour

  .blockquote__title {
    color: var(--accent-color);
  }

  .title__highlight {
    --background: var(--accent-color);
  }

  .meta--inline-dd,
  .meta--inline {
    dd:before {
      color: var(--accent-color);
    }
  }

  //--  ACCENT THEMES
  @each $name, $value in $card-accent-colors {
    &--#{$name} {
      --accent-color: #{$value};
    }
  } 

  @each $name, $value in $theme-colours {
    &--#{$name} {
      --accent-color: #{$value};

      svg {
          fill: #{$value};
      }
    }
  }

  &--light {
    --accent-color: #{rgba(white, 0.5)};
    color: white;

    svg {
      fill: white;
    }

  }
}

a.card {
  text-decoration: none;

  .card__title {
    color: #{$primary};
    color: var(--accent-color);
  }

  &:hover {
    color: $text-color;

    .title__highlight,
    .card__title {
      text-decoration: underline;
    }
  }
}

//--  VARIANTS

.card--flex {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  flex-direction: row-reverse;

  .card__figure {
    flex: 1 1 33%;
  }

  .card__content {
    flex: 99 1 17.5em;
  }
}

.card--flex-overlap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  flex-direction: row-reverse;
  padding-bottom: $spacing-sm;

  .card__figure {
    flex: 1 1 33%;
  }

  .card__content {
    flex: 99 1 17.5em;
  }

  .card__figure {
    margin-bottom: -#{$spacing-sm};
  }
}

.card--testimonial {
  padding-bottom: $card__internal-spacing;
}

.card--pullquote {
  padding-bottom: $card__internal-spacing;
  margin-left: 5%;

  &:before {
    content: '';
    display: block;
    float: left;
    width: 5%;
    height: 0;
    padding-bottom: 5%;
    margin-left: -5%;
    background: #fff url('#{$image-theme-directory-icon}/icon-quote-primary.svg') no-repeat center center;
    background-size: contain;
  }

  // These themes need to be updated 'manually' for now, as we're using an svg,
  // and I can't think of a clever way to update dynamically based on the accent var
  // something using inline SVG use/fill, or a mask?
  // Don't forget to add the SVG to the filesystem!

  @each $name, $value in $card-accent-colors {
    &.card--#{$name} {
      &:before {
        background: #fff url('#{$image-theme-directory-icon}/icon-quote-#{$name}.svg') no-repeat center center;
        background-size: contain;
      }
    }
  }
}

.card--course {
  // this exists, but doesn't need anything specific (yet)
}

.card--result {
  // this exists, but doesn't need anything specific (yet)
}

.card--profile {
  // this exists, but doesn't need anything specific (yet)
}

.card--ksp {
  color: $neutral--primary;

  &__icon {
    margin-bottom: $card__internal-spacing;
    max-width: 100%;
    height: auto!important;

    img {
      vertical-align: baseline !important; // this is horribly lazy but browsers, sorry
    }
  }

  &.card--light {
    color: white;
  }
}

.card--event {
  margin-left: $spacing-4xl;

  .card__figure {
    margin-bottom: -#{$spacing-sm};
  }

  .card__date {
    position: absolute;
    top: 0;
    left: -$spacing-4xl;
    width: $spacing-4xl;
    @include typescale('xs');
    padding: $spacing-sm 0;
    color: white;
    background: $primary;
    background: var(--accent-color);
    line-height: 1;
    text-align: center;
    box-sizing: border-box;
  }

  .card__day {
    display: block;
    font-weight: 500;
    @include typescale('xl');

    @media (min-width: map_get($breakpoint-stages, 'mobile-wide')) {
      @include typescale('3xl');
    }
  }

  @media (min-width: (map_get($breakpoint-stages, 'tablet-wide') + 5rem)) {
    margin-left: $spacing-5xl;

    .card__date {
      left: -$spacing-5xl;
      width: $spacing-5xl;
    }

    .card__day {
      @include typescale('5xl');
    }
  }
}

.card__video.card__figure {
  @media (max-width: map_get($breakpoint-stages, 'mobile-wide')) {
    padding-bottom: 50%;
    position: relative;
    height: 0;
  }
  & iframe {
    width: 100%;
    height: 100%;
    @media (max-width: map_get($breakpoint-stages, 'mobile-wide')) {
      padding-bottom: 50%;
      position: absolute;
    }
  }
}

.grid-2-cols\@tablet {
  &  .card__video {
    &.card__figure {
      padding-bottom: 50%;
      position: relative;
      height: 0;
      & iframe {
        position: absolute;
      }
    }
  }
}
  • URL: /components/raw/card/_cards.scss
  • Filesystem Path: src/components/card/_cards.scss
  • Size: 5.7 KB