University of Staffordshire Pattern Library

Box: Open day dates

No notes defined.

<div class="grid  grid--spaced  grid-2-cols">
    <div>

        <article class="box  box--bg-offwhite">
            <div class="box__content">
                <div class="box__title  title">
                    <h3>Stoke-on-Trent campus</h3>
                </div>
                <ul class="list--unstyled">
                    <li>
                        <strong>
                            Saturday 9 March 2024
                        </strong>
                        <ul class="list--inline-bulleted">
                            <li>Undergraduate</li>
                            <li>Postgraduate</li>
                        </ul>
                    </li>
                    <li>
                        <strong>
                            Saturday 8 June 2024
                        </strong>
                        <ul class="list--inline-bulleted">
                            <li>Undergraduate</li>
                            <li>Postgraduate</li>
                        </ul>
                    </li>
                </ul>
            </div>
            <footer class="box__footer">
                <a href="#" class="button  button--block  button--sm  caps  align-center">
                    Book for undergraduate
                </a>
                <a href="#" class="button  button--block  button--sm  caps  button--dark-blue  align-center">
                    Book for postgraduate
                </a>
            </footer>
        </article>

    </div>
    <div>

        <article class="box  box--bg-offwhite">
            <div class="box__content">
                <div class="box__title  title">
                    <h3>Staffordshire University London</h3>
                </div>
                <ul class="list--unstyled">
                    <li>
                        <strong>
                            Wednesday 20 March 2024
                        </strong>
                        <ul class="list--inline-bulleted">
                            <li>Undergraduate</li>
                        </ul>
                    </li>
                    <li>
                        <strong>
                            Saturday 22 June 2024
                        </strong>
                        <ul class="list--inline-bulleted">
                            <li>Undergraduate</li>
                        </ul>
                    </li>
                </ul>
            </div>
            <footer class="box__footer">
                <a href="#" class="button  button--block  button--sm  caps  align-center">
                    Book for undergraduate
                </a>
            </footer>
        </article>

    </div>
</div>
 
<div class="grid  grid--spaced  grid-2-cols">
  <div>

    <article class="box  box--bg-offwhite">
      <div class="box__content">
      <div class="box__title  title">
        <h3>Stoke-on-Trent campus</h3>
      </div>
      <ul class="list--unstyled">
      <li>
        <strong>
          Saturday 9 March 2024
        </strong>
        <ul class="list--inline-bulleted">
          <li>Undergraduate</li>
          <li>Postgraduate</li>
        </ul>
      </li>
      <li>
        <strong>
          Saturday 8 June 2024
        </strong>
        <ul class="list--inline-bulleted">
          <li>Undergraduate</li>
          <li>Postgraduate</li>
          </ul>
        </li>
      </ul>
      </div>
      <footer class="box__footer">
        <a href="#" class="button  button--block  button--sm  caps  align-center">
          Book for undergraduate
        </a>
        <a href="#" class="button  button--block  button--sm  caps  button--dark-blue  align-center">
          Book for postgraduate
        </a>
      </footer>
    </article>

  </div>
  <div>
  
    <article class="box  box--bg-offwhite">
      <div class="box__content">
        <div class="box__title  title">
            <h3>Staffordshire University London</h3>
        </div>
        <ul class="list--unstyled">
          <li>
            <strong>
                Wednesday 20 March 2024
            </strong>
            <ul class="list--inline-bulleted">
              <li>Undergraduate</li>
            </ul>
          </li>
          <li>
            <strong>
                Saturday 22 June 2024
            </strong>
            <ul class="list--inline-bulleted">
              <li>Undergraduate</li>
            </ul>
          </li>
        </ul>
      </div>
      <footer class="box__footer">
        <a href="#" class="button  button--block  button--sm  caps  align-center">
          Book for undergraduate
        </a>
    </footer>
  </article>

  </div>
</div>
  • Content: 
    .box {
  position: relative;
  background: white;
  color: $text-color;
  margin: 0 0 $spacing-xl;

  &__figure {
    img {
      width: 100%;
    }
  }

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

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

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

  &__title {
    margin-top: 0;

    & * {
      color: $dark-blue;
    }

    a {
      text-decoration: none;
    }

  }

  &__footer {
    padding: $spacing-md calc(#{$spacing-sm} + 2.5%);
    background: $dark-blue;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05);

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

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


  //--

  &--padded {
    padding: calc(#{$spacing-sm} + 2.5%);
  }

  //-

  &--has-shadow {
    box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.15);
  }

  //-

  &--bg-offwhite {
    background: $grey-50-pc;

    & .box__footer {
      background: $grey;
    }
  }

  &--bg-greyblue-superlight {
    background: $grey-50-pc;
  }

  &--bg-dark-blue, &--bg-slate {
    background: $dark-blue;
    color: #fff;

    & .box__title * {
        color: #fff;
      }

    & a.link--standard {
      color: #fff;
      text-decoration: none;

      &:hover {
        border-bottom: 0!important;
      }
    }

    & .box__footer {
      background: $grey;
    }
  }

  &--bg-offwhite-gradient {
    background: radial-gradient(45% 660% at 50% 50%, mix(#e3e3e3, white, 30%) 0%, mix(#ccc, white, 30%) 100%);
  }
}

// -- VARIANTS

.box--with-abstitle {
  // absolutely positioned title

  .box__content:first-child {
    padding-top: calc(#{$spacing-3xl} + 2.5%);;
  }

  .box__abstitle {
    position: absolute;
    top: 0.2rem;
    left: 0;
  }

  .title__highlight {
    color: $neon;
    a {
      color: $neon;
    }
  }

  a {
    color: black;
    font-weight: 600;
    border-color: #ccc!important;
  }
}

// CG: Avoid "share this story" box clashing with long quotes in news stories
.box--share {
  clear: right;
}
  • URL: /components/raw/box/_boxes.scss
  • Filesystem Path: src\components\box\_boxes.scss
  • Size: 2.1 KB