Blockquote

Blockquote: Left No Border No Margin

Component Preview
<blockquote class="blockquote blockquote--left blockquote--remove-margin blockquote--remove-stylization">
    <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: #FFCD00;
      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: #FFCD00; }
        [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: #FFCD00; }
      [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: #FFCD00;
          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: #FFCD00;
          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: #FFCD00; }
          .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.4 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