There's a new version of UIDS!

UIDS - UI Design System

CTA

CTA Block Default: CTA Block Gold Centered

Component Preview 
<div class="cta__wrapper bg--gold">
    <div class="cta__container">

        <div class="cta__title">
            <h2 class="headline headline--uppercase">
                <span class="headline__text">Create Your Path</span>
            </h2>
        </div>

        <div class="cta__content">
            <p class="cta__summary">Iowa blends leadership in the arts with pioneering scientific research, helping students carve their own unique path–wherever it leads.</p>
        </div>

        <div class="cta__link">
            <a href="https://uiowa.edu/" class="bttn bttn--secondary bttn--caps">Request Information
                <i class="fas fa-arrow-right"></i>
            </a>
        </div>

    </div>
</div>
  • Content: 
    .cta__wrapper {
  width: 100%; }
  .cta__wrapper .bold-headline,
  .cta__wrapper .headline {
    margin: 0;
    padding: 0;
    font-size: 2.8rem;
    line-height: 1.1; }
    .cta__wrapper .bold-headline.headline--uppercase,
    .cta__wrapper .headline.headline--uppercase {
      font-size: 2.8rem; }
  .cta__wrapper[class*="bg--black"] .bold-headline,
  .cta__wrapper[class*="bg--black"] .headline {
    color: var(--brand-primary); }

.cta__summary {
  line-height: 1.5; }
  @media (min-width: 84.375em) {
    .cta__summary {
      margin: 0; } }

.cta__container {
  display: block;
  padding: 2.5rem 1.25rem;
  justify-items: center;
  align-items: center;
  text-align: center; }
  .element--left .cta__container {
    justify-items: unset;
    align-items: unset;
    text-align: unset;
    width: 100%; }
    @media (min-width: 980px) {
      .element--left .cta__container {
        padding: 1.875rem 0; } }
  @media (min-width: 980px) {
    .cta__container {
      display: grid;
      padding: 1.875rem 3rem;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      grid-column-gap: 0px;
      grid-row-gap: 0px; } }

.cta__container > div {
  margin: 1.05rem; }
  @media (min-width: 84.375em) {
    .cta__container > div {
      margin: 0 1.05rem; } }
  @media (min-width: 84.375em) {
    .cta__container > div {
      flex: 1; } }

.cta__wrapper.element--left .bold-headline {
  font-size: 3.2rem; }

.cta__wrapper.element--left .bold-headline {
  margin-bottom: 0.625rem;
  font-size: 2.5rem; }

@media (min-width: 980px) {
  .cta__container .cta__title {
    margin-left: 0; } }

.element--left .cta__container .cta__title {
  grid-area: 1 / 1 / 2 / 3; }

@media (min-width: 980px) {
  .cta__container .cta__content {
    margin-left: 0; } }

.element--left .cta__container .cta__content {
  grid-area: 2 / 1 / 3 / 3; }

@media (min-width: 980px) {
  .cta__container .cta__link {
    margin-left: 0; } }

.element--left .cta__container .cta__link {
  grid-area: 1 / 3 / 3 / 4; }
  @media (min-width: 980px) {
    .element--left .cta__container .cta__link {
      text-align: right;
      display: flex;
      align-items: center;
      justify-content: flex-end; } }
  • URL: /components/raw/cta/cta.css
  • Filesystem Path: src/components/cta/cta.css
  • Size: 2.2 KB
  • Content: 
    @import '../../assets/scss/variables';
@import '../../assets/scss/utilities';

.cta {
  &__wrapper {
    width: 100%;

    .bold-headline,
    .headline {
      margin: 0;
      padding: 0;
      font-size: 2.8rem;
      line-height: 1.1;
      &.headline--uppercase {
        font-size: 2.8rem;
      }
    }

    &[class*="bg--black"] {
      .bold-headline,
      .headline {
        color: $primary;
      }
    }
  }

  &__summary {
    line-height: 1.5;

    @include breakpoint(page-container) {
      margin: 0;
    }
  }

  &__container {
    display: block;
    padding: $xlg $mobile-width-gutter;
    justify-items: center;
    align-items: center;
    text-align: center;

    .element--left & {
      justify-items: unset;
      align-items: unset;
      text-align: unset;
      width: 100%;

      @include breakpoint(md) {
        padding: $lg 0;
      }
    }

    @include breakpoint(md) {
      display: grid;
      padding: $lg $desktop-width-gutter;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      grid-column-gap: 0px;
      grid-row-gap: 0px;
    }
  }
}

.cta__container>div {
  margin: $md;

  @include breakpoint(page-container) {
    margin: 0 $md;
  }

  @include breakpoint(page-container) {
    flex: 1;
  }
}

.cta__wrapper.element--left .bold-headline {
  font-size: 3.2rem;
}

.cta__wrapper.element--left .bold-headline {
  margin-bottom: $sm;
  font-size: 2.5rem;
}

.cta__container {
  .cta__title {
    @include breakpoint(md) {
      margin-left: 0;
    }

    .element--left & {
      grid-area: 1 / 1 / 2 / 3;
    }
  }

  .cta__content {
    @include breakpoint(md) {
      margin-left: 0;
    }

    .element--left & {
      grid-area: 2 / 1 / 3 / 3;
    }
  }

  .cta__link {
    @include breakpoint(md) {
      margin-left: 0;
    }

    .element--left & {
      grid-area: 1 / 3 / 3 / 4;

      @include breakpoint(md) {
        text-align: right;
        @include center(vertical);
        justify-content: flex-end;
      }
    }
  }
}
  • URL: /components/raw/cta/cta.scss
  • Filesystem Path: src/components/cta/cta.scss
  • Size: 2 KB