University of Staffordshire Pattern Library

Zebra

No notes defined.

<p><strong>Useful Note</strong>: Images are <code>img</code> elements not backgrounds, sized with object fit so they can take advantage of srcset if possible. Add an inline style [x/y] of <code>object-position</code> to set the focal point for the image, eg. <code>style="object-position: 70% 20%"</code> for an image with a focal point towards the top right.</p>

<hr />

<div class="zebra">
    <div class="zebra__row">
        <figure class="zebra__figure">
            <img src="https://picsum.photos/600/400?random=1" style="object-position: 50% 50%" />
        </figure>

        <div class="zebra__body">
            <header class="title  zebra__title">
                <h2 class="h4">Welcome Talks</h2>
            </header>

            <p>Once you’ve registered on the day, make your way to one of our welcome talks that run from 9.30am until 1pm. Here you’ll find out everything you need to know about our institution, the surrounding area, and why all our students and staff are <a href="">#ProudToBeStaffs</a>.</p>
        </div>
    </div>

    <div class="zebra__row">
        <figure class="zebra__figure">
            <img src="https://picsum.photos/600/400?random=2" style="object-position: 50% 50%" />
        </figure>

        <div class="zebra__body">
            <header class="title  zebra__title">
                <h2 class="h4">A title that's very long that will probably-need to wrap to two lines</h2>
            </header>

            <p>The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode. Staffordshire University is going global with a programme packed full of free events to start the new decade.</p>
            <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="zebra__row">
        <figure class="zebra__figure">
            <img src="https://picsum.photos/600/400?random=3" style="object-position: 50% 50%" />
        </figure>

        <div class="zebra__body">
            <header class="title  zebra__title">
                <h2 class="h4">Enjoying the View? How computer games can help evaluate landscapes</h2>
            </header>

            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
    </div>

    <div class="zebra__row">
        <figure class="zebra__figure">
            <img src="https://picsum.photos/600/400?random=4" style="object-position: 50% 50%" />
        </figure>

        <div class="zebra__body">
            <header class="title  zebra__title">
                <h2 class="h4">A random campus</h2>
            </header>

            <p>Set in the bustling Here East technological hub in the Queen Elizabeth Olympic Park in Stratford, our London campus boasts facilities to create the next generation of learning.</p>

            <a href="" class="button">

                Explore random
            </a>

        </div>
    </div>

    <div class="zebra__row">
        <figure class="zebra__figure">
            <img src="https://picsum.photos/600/400?random=5" style="object-position: 50% 50%" />
        </figure>

        <div class="zebra__body">
            <header class="title  zebra__title">
                <h2 class="h4">A random campus</h2>
            </header>

            <p>Set in the bustling Here East technological hub in the Queen Elizabeth Olympic Park in Stratford, our London campus boasts facilities to create the next generation of learning.</p>

            <a href="" class="button">

                Explore random
            </a>

        </div>
    </div>
</div>
 
<p><strong>Useful Note</strong>: Images are <code>img</code> elements not backgrounds, sized with object fit so they can take advantage of srcset if possible. Add an inline style [x/y] of <code>object-position</code> to set the focal point for the image, eg. <code>style="object-position: 70% 20%"</code> for an image with a focal point towards the top right.</p>

<hr/>

<div class="zebra">
  <div class="zebra__row">
    <figure class="zebra__figure">
      <img src="https://picsum.photos/600/400?random=1" style="object-position: 50% 50%" />
    </figure>


    <div class="zebra__body">
      <header class="title  zebra__title">
        <h2 class="h4">Welcome Talks</h2>
      </header>

      <p>Once you’ve registered on the day, make your way to one of our welcome talks that run from 9.30am until 1pm. Here you’ll find out everything you need to know about our institution, the surrounding area, and why all our students and staff are <a href="">#ProudToBeStaffs</a>.</p>
    </div>
  </div>

  <div class="zebra__row">
    <figure class="zebra__figure">
      <img src="https://picsum.photos/600/400?random=2" style="object-position: 50% 50%" />
    </figure>


    <div class="zebra__body">
      <header class="title  zebra__title">
        <h2 class="h4">A title that's very long that will probably-need to wrap to two lines</h2>
      </header>

      <p>{{ placeholderPara1 }} {{ placeholderPara2 }}</p>
      <p>{{ placeholderPara3 }}</p>
    </div>
  </div>

  <div class="zebra__row">
    <figure class="zebra__figure">
      <img src="https://picsum.photos/600/400?random=3" style="object-position: 50% 50%" />
    </figure>


    <div class="zebra__body">
      <header class="title  zebra__title">
        <h2 class="h4">{{ placeholderHeadline2 }}</h2>
      </header>

      <p>{{ loremLong }}</p>
    </div>
  </div>

  <div class="zebra__row">
    <figure class="zebra__figure">
      <img src="https://picsum.photos/600/400?random=4" style="object-position: 50% 50%" />
    </figure>


    <div class="zebra__body">
      <header class="title  zebra__title">
        <h2 class="h4">A random campus</h2>
      </header>

      <p>Set in the bustling Here East technological hub in the Queen Elizabeth Olympic Park in Stratford, our London campus boasts facilities to create the next generation of learning.</p>
      {% include '@button' with {
        text: 'Explore random',
      } %}
    </div>
  </div>

  <div class="zebra__row">
    <figure class="zebra__figure">
      <img src="https://picsum.photos/600/400?random=5" style="object-position: 50% 50%" />
    </figure>


    <div class="zebra__body">
      <header class="title  zebra__title">
        <h2 class="h4">A random campus</h2>
      </header>

      <p>Set in the bustling Here East technological hub in the Queen Elizabeth Olympic Park in Stratford, our London campus boasts facilities to create the next generation of learning.</p>
      {% include '@button' with {
        text: 'Explore random',
      } %}
    </div>
  </div>
</div>
  • Content: 
    .zebra {
  $zebra-inline-breakpoint: 50rem;
  $zebra-overlap: 5%;

  margin: $spacing-md 0 $spacing-xl;

  @each $name, $value in $zebra-bg-colors {
    &--bg-#{$name} .zebra__row .zebra__body {
      background: #{$value};
    }

    @each $name, $value in $zebra-bg-colors {
      &--bg-#{$name} {
        & .zebra__row:nth-child(odd) {
          background-color: white;

          .zebra__body {
            color: white;
            & h2, & a:not(.button) {
              color: white;
            }
          }
        }

        & .zebra__row:nth-child(even) {
          .zebra__body {
            & h2, & a:not(.button) {
              color: #{$value};
            }
          }
        }
      }
    }
  }

  &__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background-color: $grey-50-pc;

    &:nth-child(even) {
      flex-direction: row-reverse;
      background-color: $grey-50-pc;

      .zebra__body {
        background-color: white;

        @media (min-width: $zebra-inline-breakpoint) {
          // this is a weird exception because it was designed so the reverse row has no margin on the left,
          // while the grey-50-pc background row does, because it looks better
          // it's done in a particular way so IE likes it.
          flex: 1 0 50%; // IE.
          left: $zebra-overlap;
        }
      }
    }
  }

  &__figure {
    position: relative;
    margin: 0;
    flex: 1 0 50%;
    align-self: stretch;
    z-index: 0;
    box-sizing: border-box;

    display: flex;
    align-items: center;

    @supports (object-fit: cover) {
      align-items: stretch;
    }

    @media (min-width: $zebra-inline-breakpoint) {
      flex: 0 0 50%; // IE.
    }

    img {
      @supports (object-fit: cover) {
        object-fit: cover;
        object-position: center center;
        height: 100%;
      }
    }
  }

  &__body {
    position: relative;
    flex: 1 1 20em;
    min-width: 50%;
    box-sizing: border-box;
    background-color: white;
    padding: $spacing-xl;
    z-index: 0;

    @media (min-width: $zebra-inline-breakpoint) {
      flex: 0 0 45%; // IE.
      margin: $spacing-4xl auto $spacing-2xl;
      left: -#{$zebra-overlap};
    }
  }
}

// CG: Override for existing Contensis templates
.zebra__title h2.title__highlight {
  background: none;
  color: $burgundy;
  box-shadow: none;
  left: inherit;
  padding: 0;
}
  • URL: /components/raw/zebra/_zebra.scss
  • Filesystem Path: src\components\zebra\_zebra.scss
  • Size: 2.5 KB