There's a new version of UIDS!

UIDS - UI Design System

Blockquote

Blockquote: Left With Image Aligned To The Left Of The Content

Component Preview 
<blockquote class="blockquote blockquote--left blockquote--img-above">
    <div class="blockquote__media"> <img src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" class="media--circle" /> </div>
    <div class="blockquote__content">
        <div class="blockquote__paragraph">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <footer>
            <div>
                <strong>Footer Details in Roboto</strong>
                <cite>
                    <a href="https://uiowa.edu/">Link</a>
                </cite>
            </div>
        </footer>

    </div>

</blockquote>
  • Content: 
    blockquote {
  font-weight: 400;
  font-style: none;
  font-family: "Zilla Slab", "Zilla-fallback", serif;
  border-left-style: solid;
  border-width: 10px;
  border-color: var(--brand-primary);
  padding: 1.875rem;
  font-size: 1.5rem;
  line-height: 1.7;
  padding-top: 0.325rem;
  padding-bottom: 0.325rem;
  padding-left: 1.875rem; }
  blockquote cite {
    display: block; }
  blockquote .blockquote__media {
    max-width: 160px; }
  [class*="bg--black"] blockquote,
  [class*="bg--"] [class*="bg--black"] blockquote,
  [class*="bg--gray"] blockquote,
  [class*="bg--"] [class*="bg--gray"] blockquote,
  [class*="bg--white"] blockquote,
  [class*="bg--"] [class*="bg--white"] blockquote {
    border-color: var(--brand-primary); }
    [class*="bg--black"] blockquote::before,
    [class*="bg--"] [class*="bg--black"] blockquote::before,
    [class*="bg--gray"] blockquote::before,
    [class*="bg--"] [class*="bg--gray"] blockquote::before,
    [class*="bg--white"] blockquote::before,
    [class*="bg--"] [class*="bg--white"] blockquote::before {
      background: var(--brand-primary); }
  [class*="bg--gold"] blockquote,
  [class*="bg--"] [class*="bg--gold"] blockquote {
    border-color: #fff; }
    [class*="bg--gold"] blockquote::before,
    [class*="bg--"] [class*="bg--gold"] blockquote::before {
      background: #fff; }
  blockquote p {
    margin-top: 0;
    font-weight: 400;
    font-size: 1.4rem; }
  blockquote footer {
    font-family: "Roboto", sans-serif;
    margin-top: 1.05rem;
    font-size: 1.2rem; }
  blockquote p + footer {
    margin-top: 0; }
  blockquote.blockquote--center, blockquote.blockquote--left, blockquote.blockquote--right {
    flex-basis: 100%; }
  blockquote.blockquote--center,
  .blockquote-center blockquote {
    text-align: center;
    border: none;
    position: relative;
    padding-top: 2.5rem;
    padding-right: 0.325rem;
    padding-bottom: 0.325rem;
    padding-left: 0.325rem; }
    blockquote.blockquote--center img,
    .blockquote-center blockquote img {
      margin: 0 auto;
      display: block; }
    blockquote.blockquote--center::before,
    .blockquote-center blockquote::before {
      position: absolute;
      content: '';
      height: 10px;
      top: 11px;
      margin: 0 auto;
      left: 0;
      right: 0;
      width: 130px;
      background: var(--brand-primary);
      transition: 0.5s; }
      .bg--gold--pattern--brain blockquote.blockquote--center::before,
      .bg-pattern--brain-reversed blockquote.blockquote--center::before,
      [class*="bg--gold"] blockquote.blockquote--center::before, .bg--gold--pattern--brain
      .blockquote-center blockquote::before,
      .bg-pattern--brain-reversed
      .blockquote-center blockquote::before,
      [class*="bg--gold"]
      .blockquote-center blockquote::before {
        background: #fff; }
  blockquote.blockquote--right,
  .blockquote-right blockquote {
    text-align: end;
    border-left: none;
    border-right-style: solid;
    padding: 0.325rem 1.875rem; }
  blockquote.blockquote--img-above.blockquote--left, blockquote.blockquote--img-above.blockquote--right, blockquote.blockquote--img-below.blockquote--left, blockquote.blockquote--img-below.blockquote--right {
    margin-bottom: 1.25rem; }
    blockquote.blockquote--img-above.blockquote--left .blockquote__media, blockquote.blockquote--img-above.blockquote--right .blockquote__media, blockquote.blockquote--img-below.blockquote--left .blockquote__media, blockquote.blockquote--img-below.blockquote--right .blockquote__media {
      margin-bottom: 0.9rem; }
      @media (min-width: 768px) {
        blockquote.blockquote--img-above.blockquote--left .blockquote__media, blockquote.blockquote--img-above.blockquote--right .blockquote__media, blockquote.blockquote--img-below.blockquote--left .blockquote__media, blockquote.blockquote--img-below.blockquote--right .blockquote__media {
          margin-bottom: 0; } }
  blockquote.blockquote--img-above.blockquote--center .blockquote__media, blockquote.blockquote--img-above.blockquote--left .blockquote__media, blockquote.blockquote--img-below.blockquote--center .blockquote__media, blockquote.blockquote--img-below.blockquote--left .blockquote__media {
    margin-right: 1.3rem;
    margin-top: 0.7rem; }
  blockquote.blockquote--img-above.blockquote--right .blockquote__media, blockquote.blockquote--img-below.blockquote--right .blockquote__media {
    margin-left: 1.3rem;
    margin-top: 0.7rem; }
  @media (min-width: 768px) {
    blockquote.blockquote--img-above .blockquote__media {
      flex: 0 1 auto; } }
  @media (min-width: 768px) {
    blockquote.blockquote--img-above .blockquote__content {
      flex: 0 1 75%; } }
  blockquote.blockquote--img-above .blockquote__paragraph {
    position: relative;
    padding-bottom: 1.875rem; }
    blockquote.blockquote--img-above .blockquote__paragraph::after {
      position: absolute;
      content: '';
      height: 10px;
      bottom: 0;
      left: 0;
      right: 0;
      width: 130px;
      background: var(--brand-primary);
      transition: 0.5s; }
      .bg--black--pattern--brain blockquote.blockquote--img-above .blockquote__paragraph::after,
      .bg--white--pattern--brain blockquote.blockquote--img-above .blockquote__paragraph::after,
      .bg-pattern--brain blockquote.blockquote--img-above .blockquote__paragraph::after,
      .bg-pattern--brain-black blockquote.blockquote--img-above .blockquote__paragraph::after,
      [class*="bg--black"] blockquote.blockquote--img-above .blockquote__paragraph::after,
      [class*="bg--gray"] blockquote.blockquote--img-above .blockquote__paragraph::after,
      [class*="bg--white"] blockquote.blockquote--img-above .blockquote__paragraph::after {
        background: var(--brand-primary); }
      .bg--gold--pattern--brain blockquote.blockquote--img-above .blockquote__paragraph::after,
      .bg-pattern--brain-reversed blockquote.blockquote--img-above .blockquote__paragraph::after,
      [class*="bg--gold"] blockquote.blockquote--img-above .blockquote__paragraph::after {
        background: #fff; }
  blockquote.blockquote--img-above.blockquote--left, blockquote.blockquote--img-above.blockquote--right {
    border: none;
    margin-right: 0;
    margin-left: 0;
    padding: 1.05rem 0;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap; }
  blockquote.blockquote--img-above.blockquote--right {
    flex-direction: row-reverse; }
    blockquote.blockquote--img-above.blockquote--right .blockquote__paragraph::after {
      right: 0;
      left: inherit; }
  blockquote.blockquote--img-above.blockquote--center {
    padding-top: 0; }
    blockquote.blockquote--img-above.blockquote--center::before {
      position: absolute;
      content: '';
      height: 0;
      top: 0.9rem;
      margin: 0 auto;
      left: 0;
      right: 0;
      width: 0;
      background: none;
      transition: 0.5s;
      display: none; }
    blockquote.blockquote--img-above.blockquote--center .blockquote__media {
      position: relative;
      margin: 0 auto 1.05rem; }
    blockquote.blockquote--img-above.blockquote--center .blockquote__paragraph::after {
      margin: 0 auto; }
  blockquote.blockquote--img-below .blockquote__media {
    max-width: 100px; }
  blockquote.blockquote--img-below footer {
    display: flex;
    margin-top: 0;
    align-items: center; }
  blockquote.blockquote--img-below cite {
    display: block;
    text-align: start; }
  blockquote.blockquote--img-below.blockquote--center footer {
    margin: 0.325rem auto 0;
    justify-content: center;
    text-align: left; }
    @media (min-width: 768px) {
      blockquote.blockquote--img-below.blockquote--center footer {
        max-width: 40%; } }
  blockquote.blockquote--img-below.blockquote--right footer {
    text-align: end;
    flex-direction: row-reverse;
    align-content: end; }
  blockquote.blockquote--img-below.blockquote--right cite {
    text-align: end; }
  blockquote.blockquote--remove-stylization {
    border-width: 0; }
    blockquote.blockquote--remove-stylization.blockquote--img-above .blockquote__paragraph {
      padding-bottom: 0; }
    blockquote.blockquote--remove-stylization::before {
      height: 0; }
    blockquote.blockquote--remove-stylization .blockquote__paragraph::after {
      height: 0; }
  blockquote.blockquote--remove-margin.blockquote--left, blockquote.blockquote--remove-margin.blockquote--right {
    margin-left: 0;
    margin-right: 0; }
  • URL: /components/raw/blockquote/blockquote.css
  • Filesystem Path: src/components/blockquote/blockquote.css
  • Size: 8.5 KB
  • Content: 
    @import '../../assets/scss/variables';
@import '../../assets/scss/utilities';

blockquote {
  cite {
    display: block;
  }

  .blockquote__media {
    max-width: 160px;
  }

  font-weight: $font-weight-normal;
  font-style: none;
  font-family: $font-family-serif;
  border-left-style: solid;
  border-width: 10px;
  border-color: $primary;
  padding: $lg;
  font-size: 1.5rem;
  line-height: 1.7;

  @include padding($top: $xsm, $bottom: $xsm, $left: $lg);
  // border color overrides for certain background colors
  [class*="bg--black"] &,
  [class*="bg--"] [class*="bg--black"] &,
  [class*="bg--gray"] &,
  [class*="bg--"] [class*="bg--gray"] &,
  [class*="bg--white"] &,
  [class*="bg--"] [class*="bg--white"] &, {
    border-color: $primary;

    &::before {
      background: $primary;
    }
  }


  [class*="bg--gold"] &,
  [class*="bg--"] [class*="bg--gold"] & {
    border-color: #fff;

    &::before {
      background: #fff;
    }
  }

  p {
    margin-top: 0;
    font-weight: $font-weight-normal;
    font-size: $h5-font-size;
  }

  footer {
    font-family: $font-family-sans-serif;
    margin-top: $md;
    font-size: $content-font-size;
  }

  p + footer {
    margin-top: 0;
  }

  &.blockquote--center,
  &.blockquote--left,
  &.blockquote--right {
    flex-basis: 100%;
  }
  // @todo 2020/12/08 Remove '.blockquote-center' class in v4.0.0
  &.blockquote--center,
  .blockquote-center & {
    img {
      margin: 0 auto;
      display: block;
    }

    text-align: center;
    border: none;
    position: relative;

    @include padding($top: $xlg, $bottom: $xsm, $left: $xsm, $right: $xsm);

    &::before {
      position: absolute;
      content: '';
      height: 10px;
      top: 11px;
      margin: 0 auto;
      left: 0;
      right: 0;
      width: 130px;
      background: $primary;
      -webkit-transition: 0.5s;
      transition: 0.5s;

      .bg--gold--pattern--brain &,
      .bg-pattern--brain-reversed &,
      [class*="bg--gold"] & {
        background: #fff;
      }
    }
  }
  // @todo 2020/12/08 Remove '.blockquote-right' class in v4.0.0
  &.blockquote--right,
  .blockquote-right & {
    text-align: end;
    border-left: none;
    border-right-style: solid;
    padding: $xsm $lg;
  }
  // Shared styles for above and below options.
  &.blockquote--img-above,
  &.blockquote--img-below {
    &.blockquote--left,
    &.blockquote--right {
      margin-bottom: $mobile-width-gutter;

      .blockquote__media {
        margin-bottom: $sm-md;

        @include breakpoint(sm) {
          margin-bottom: 0;
        }
      }
    }

    &.blockquote--center,
    &.blockquote--left {
      .blockquote__media {
        margin-right: 1.3rem;
        margin-top: 0.7rem;
      }
    }

    &.blockquote--right {
      .blockquote__media {
        margin-left: 1.3rem;
        margin-top: 0.7rem;
      }
    }
  }
  // Blockquote image above.
  &.blockquote--img-above {
    .blockquote__media {
      @include breakpoint(sm) {
        flex: 0 1 auto;
      }
    }

    .blockquote__content {
      @include breakpoint(sm) {
        flex: 0 1 75%;
      }
    }

    .blockquote__paragraph {
      position: relative;
      padding-bottom: $lg;

      &::after {
        position: absolute;
        content: '';
        height: 10px;
        bottom: 0;
        left: 0;
        right: 0;
        width: 130px;
        background: $primary;
        -webkit-transition: 0.5s;
        transition: 0.5s;

        .bg--black--pattern--brain &,
        .bg--white--pattern--brain &,
        .bg-pattern--brain &,
        .bg-pattern--brain-black &,
        [class*="bg--black"] &,
        [class*="bg--gray"] &,
        [class*="bg--white"] & {
          background: $primary;
        }

        .bg--gold--pattern--brain &,
        .bg-pattern--brain-reversed &,
        [class*="bg--gold"] & {
          background: #fff;
        }
      }
    }

    &.blockquote--left,
    &.blockquote--right {
      border: none;
      margin-right: 0;
      margin-left: 0;
      padding: $md 0;
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;
    }

    &.blockquote--right {
      flex-direction: row-reverse;

      .blockquote__paragraph {
        &::after {
          right: 0;
          left: inherit;
        }
      }
    }

    &.blockquote--center {
      padding-top: 0;

      &::before {
        position: absolute;
        content: '';
        height: 0;
        top: $sm-md;
        margin: 0 auto;
        left: 0;
        right: 0;
        width: 0;
        background: none;
        -webkit-transition: 0.5s;
        transition: 0.5s;
        display: none;
      }

      .blockquote__media {
        position: relative;
        margin: 0 auto $md;
      }

      .blockquote__paragraph {
        &::after {
          margin: 0 auto;
        }
      }
    }
  }
  // Blockquote image below.
  &.blockquote--img-below {
    .blockquote__media {
      max-width: 100px;
    }

    footer {
      display: flex;
      margin-top: 0;
      align-items: center;
    }

    cite {
      display: block;
      text-align: start;
    }

    &.blockquote--center {
      footer {
        @include breakpoint(sm) {
          max-width: 40%;
        }

        margin: $xsm auto 0;
        justify-content: center;
        text-align: left;
      }
    }

    &.blockquote--right {
      footer {
        text-align: end;
        flex-direction: row-reverse;
        align-content: end;
      }

      cite {
        text-align: end;
      }
    }
  }

  &.blockquote--remove-stylization {
    border-width: 0;

    &.blockquote--img-above {
      .blockquote__paragraph {
        padding-bottom: 0;
      }
    }

    &::before {
      height: 0;
    }

    .blockquote__paragraph {
      &::after {
        height: 0;
      }
    }
  }

  &.blockquote--remove-margin {
    &.blockquote--left,
    &.blockquote--right {
      margin-left: 0;
      margin-right: 0;
    }
  }
}
  • URL: /components/raw/blockquote/blockquote.scss
  • Filesystem Path: src/components/blockquote/blockquote.scss
  • Size: 5.9 KB