Event

Events Block: Events Block Basic

Output (HTML)
Assets
Info


        
        <div class="events-card__wrapper bg--gold">

    <div class="events-card events-card__row">
        <div class="events-card__image">
            <img class="events-card__img" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
        </div>
        <div class="events-card__body">

            <h2 class="headline events-card__title">
                <a href="https://uiowa.edu/">
                    <span class="headline__text">College of Liberal Arts and Sciences 9 a.m. Commencement Ceremony</span>
                </a>
            </h2>

            <div class="events-card__details">
                <div class="events-card__date">
                    May 16, 2020, 9:00 AM</div>
                <div class="events-card__label">
                    <i class="fas fa-map-marker-alt"></i>
                    Carver-Hawkeye Arena</div>
            </div>

        </div>
    </div>

    <div class="events-card events-card__row">
        <div class="events-card__image">
            <img class="events-card__img" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-02.jpg" alt="Alt Text">
        </div>
        <div class="events-card__body">

            <h2 class="headline events-card__title">
                <a href="https://uiowa.edu/">
                    <span class="headline__text">College of Engineering 9 a.m. Commencement Ceremony</span>
                </a>
            </h2>

            <div class="events-card__details">
                <div class="events-card__date">
                    May 17, 2020, 9:00 AM</div>
                <div class="events-card__label">
                    <i class="fas fa-map-marker-alt"></i>
                    Carver-Hawkeye Arena</div>
            </div>

        </div>
    </div>

    <div class="events-card events-card__row">
        <div class="events-card__image">
            <img class="events-card__img" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-03.jpg" alt="Alt Text">
        </div>
        <div class="events-card__body">

            <h2 class="headline events-card__title">
                <a href="https://uiowa.edu/">
                    <span class="headline__text">College of Education 9 a.m. Commencement Ceremony</span>
                </a>
            </h2>

            <div class="events-card__details">
                <div class="events-card__date">
                    May 18, 2020, 9:00 AM</div>
                <div class="events-card__label">
                    <i class="fas fa-map-marker-alt"></i>
                    Carver-Hawkeye Arena</div>
            </div>

        </div>
    </div>

</div>

File:

Content:


                                .events-card {
  position: relative;
  transition: transform .35s, z-index .5s;
  display: flex;
  flex-direction: column;
  flex: 1 1 0%; }
  .events-card__body {
    padding: 0 1.25rem 1.25rem 1.25rem;
    flex: 0 1 100%; }
    @media (min-width: 768px) {
      .events-card__body {
        text-align: center; } }
    @media (min-width: 84.375em) {
      .events-card__body {
        padding: 0;
        text-align: left; } }
  .events-card__row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start; }
    @media (min-width: 84.375em) {
      .events-card__row {
        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
        border: none;
        padding: 1.5rem;
        background: transparent; } }
    .events-card__row .fas,
    .events-card__row .svg-inline--fa {
      color: #737373;
      padding-right: 0.325rem;
      position: absolute;
      margin-left: -25px; }
      .bg--gold .events-card__row .fas, .bg--gold
      .events-card__row .svg-inline--fa {
        color: white; }
    .events-card__row .svg-inline--fa {
      width: 17px; }
  .events-card__wrapper {
    padding-bottom: 20px; }
    @media (min-width: 980px) {
      .events-card__wrapper {
        padding-bottom: 0;
        padding: 0 3rem;
        display: flex; } }
  .events-card__image {
    overflow: hidden;
    contain: paint; }
    @media (min-width: 84.375em) {
      .events-card__image {
        height: auto;
        margin-bottom: 0; } }
  .events-card__image img {
    align-self: start;
    background: #fff; }
    @media (min-width: 768px) {
      .events-card__image img {
        border-radius: 50%;
        margin-top: 0;
        height: auto;
        padding: 8px;
        border: 1px solid #737373; } }
    .bg--gold .events-card__image img {
      background: var(--brand-primary); }
      @media (min-width: 768px) {
        .bg--gold .events-card__image img {
          border: 1px solid white; } }
    .bg--gray .events-card__image img {
      background: #f3f3f3; }
    .bg--black .events-card__image img {
      background: var(--brand-secondary);
      border: 1px solid var(--brand-primary); }
  .events-card .bttn {
    padding: 0.325rem;
    margin-top: 1.05rem;
    background: transparent;
    border: none;
    font-size: .8rem; }
    .bg--gold .events-card .bttn:after {
      background-color: #fff; }
    .bg--black .events-card .bttn,
    .bg--gold .events-card .bttn,
    .bg--gray .events-card .bttn {
      padding: 0 0 .4rem 0; }
    .bg--gray .events-card .bttn {
      border-color: #737373; }
    .bg--black .events-card .bttn {
      color: var(--brand-primary); }
  @media (min-width: 768px) {
    .events-card__image {
      display: block;
      width: 70%;
      margin: 0 auto; } }
  @media (min-width: 84.375em) {
    .events-card__image {
      display: block;
      width: auto;
      flex: 0 1 30%;
      margin-right: 15px;
      margin-left: 0; } }
  .events-card__label {
    font-family: "Zilla Slab", "Zilla-fallback", serif;
    font-size: 1.2rem;
    font-weight: 300;
    padding-left: 25px; }
    .bg--black .events-card__label {
      color: #f3f3f3; }
  .events-card__title {
    font-family: "Zilla Slab", "Zilla-fallback", serif;
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: 0.625rem;
    margin-bottom: 0.325rem; }
    .events-card__title a {
      text-decoration: none;
      color: var(--brand-secondary); }
      .events-card__title a:hover, .events-card__title a:focus {
        text-decoration: underline; }
      .events-card__title a:after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0; }
      .bg--black .events-card__title a {
        color: white; }
  .events-card__date {
    margin-bottom: 0.325rem;
    font-family: "Zilla Slab", "Zilla-fallback", serif;
    font-size: 1.2rem;
    font-weight: 300;
    font-style: italic; }
    .bg--black .events-card__date {
      color: var(--brand-primary); }
  .events-card__text {
    margin-top: 0.625rem;
    margin-bottom: 0.625rem; }
  .events-card__link {
    text-decoration: none;
    letter-spacing: .06rem;
    text-transform: uppercase;
    color: var(--brand-secondary);
    font-weight: 300; }
    .events-card__link:after {
      content: "\f0da";
      padding-left: 0.625rem;
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      line-height: 1;
      font-family: "Font Awesome 5 Free";
      font-weight: 900; }

@media (min-width: 84.375em) {
  .events-card__image + .events-card__body {
    flex: 0 1 70%; } }

URL: /components/raw/events-block/event.css
Filesystem Path: src/components/event/event.css
Size: 4.7 KB

Content:


                                @import '../../assets/scss/variables';
@import '../../assets/scss/utilities';

.events-card {
  position: relative;
  transition: transform .35s, z-index .5s;
  @include flexbox;
  @include flex-direction($value: column);
  @include flex($fg: 1, $fs: 1, $fb: 0%);

  &__body {
    padding: 0 $mobile-width-gutter $mobile-width-gutter $mobile-width-gutter;
    flex: 0 1 100%;

    @include breakpoint(sm) {
      text-align: center;
    }

    @include breakpoint(page-container) {
      padding: 0;
      text-align: left;
    }
  }

  &__row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;

    @include breakpoint(page-container) {
      display: flex;
      justify-content: center;
      flex-wrap: nowrap;
      border: none;
      padding: 1.5rem;
      background: transparent;
    }

    .fas,
    .svg-inline--fa {
      color: $grey;
      padding-right: $xsm;
      position: absolute;
      margin-left: -25px;

      .bg--gold & {
        color: white;

      }
    }

    .svg-inline--fa {
      width: 17px;
    }
  }

  &__wrapper {
    padding-bottom: 20px;

    @include breakpoint(md) {
      padding-bottom: 0;
      padding: 0 3rem;
      @include flexbox;
    }
  }

  &__image {
    overflow: hidden;
    contain: paint;

    @include breakpoint(page-container) {

      height: auto;
      margin-bottom: 0;
    }
  }

  &__image img {
    align-self: start;

    @include breakpoint(sm) {
      border-radius: 50%;
      margin-top: 0;
      height: auto;
      padding: 8px;
      border: 1px solid $grey;
    }

    background: #fff;

    .bg--gold & {
      @include breakpoint(sm) {
        border: 1px solid white;
      }
      background: $primary;
    }

    .bg--gray & {
      background: $light;
    }

    .bg--black & {
      background: $secondary;
      border: 1px solid $primary;
    }
  }

  .bttn {
    padding: $xsm;
    margin-top: $md;
    background: transparent;
    border: none;
    font-size: .8rem;

    &:after {
      .bg--gold & {
        background-color: #fff;
      }
    }

    .bg--black &,
    .bg--gold &,
    .bg--gray & {
      padding: 0 0 .4rem 0;
    }

    .bg--gray & {
      border-color: $grey;
    }

    .bg--black & {
      color: $primary;
    }
  }

  &__image {

    @include breakpoint(sm) {
      display: block;
      width: 70%;
      margin: 0 auto;
    }

    @include breakpoint(page-container) {
      display: block;
      width: auto;
      flex: 0 1 30%;
      margin-right: 15px;
      margin-left: 0;
    }
  }


  &__label {
    font-family: $font-family-serif;
    font-size: $h6-font-size;
    font-weight: $font-weight-light;
    padding-left: 25px;

    .bg--black & {
      color: $light;
    }
  }

  &__title {
    font-family: $font-family-serif;
    font-size: $h6-font-size;
    font-weight: $font-weight-bold;
    @include margin($top: $sm, $bottom: $xsm);

    a {
      text-decoration: none;
      color: $secondary;

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

      &:after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
      }

      .bg--black & {
        color: white;
      }
    }
  }

  &__date {
    margin-bottom: $xsm;
    font-family: $font-family-serif;
    font-size: 1.2rem;
    font-weight: $font-weight-light;
    font-style: italic;

    .bg--black & {
      color: $primary;
    }
  }

  &__text {
    @include margin($top: $sm, $bottom: $sm);
  }

  &__link {
    text-decoration: none;
    letter-spacing: .06rem;
    text-transform: uppercase;
    color: $secondary;
    font-weight: $font-weight-light;

    &:after {
      content: "\f0da";
      @include padding($left: $sm);
      @include fas();
    }
  }
}

.events-card__image+.events-card__body {
  @include breakpoint(page-container) {
    flex: 0 1 70%;
  }
}

URL: /components/raw/events-block/event.scss
Filesystem Path: src/components/event/event.scss
Size: 3.9 KB

Handle: @events-block--default
Variants (2): Events Block Basic , Events Block Simple
Preview:
- With layout
- Component only
Filesystem Path: src/components/event/event.twig
References (1): @events-block--basic