Blockquote

Blockquote: Center

Component Preview
<blockquote class="blockquote--center">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    <footer>
        Footer Details in Roboto
        <cite>
            <a href="https://uiowa.edu">Link</a>
        </cite>
    </footer>
</blockquote>
  • Content:
    blockquote {
      font-weight: 400;
      font-style: none;
      font-family: "Zilla Slab", serif;
      border-left: 8px solid #FFCD00;
      padding: 1.875rem;
      font-size: 1.4rem;
      line-height: 1.7;
      padding-top: 0.325rem;
      padding-bottom: 0.325rem;
      padding-left: 1.875rem; }
      .bg--gray blockquote,
      .bg--white blockquote,
      .bg--gray blockquote,
      .bg-pattern--brain blockquote,
      .bg--white--pattern--brain blockquote {
        border-color: #FFCD00; }
      .bg-pattern--brain-reversed blockquote,
      .bg--gold--pattern--brain blockquote,
      .bg--gold blockquote {
        border-color: #fff; }
      .bg--black--pattern--brain blockquote,
      .bg-pattern--brain-black blockquote,
      .bg--black blockquote {
        border-color: #FFCD00; }
      blockquote p {
        margin-top: 0;
        font-weight: 400;
        font-size: 1.4rem; }
      blockquote footer {
        font-family: "Roboto", sans-serif;
        font-weight: 700;
        margin-top: 1.05rem;
        font-size: 1.2rem; }
      blockquote p + footer {
        margin-top: 0; }
      .blockquote-center blockquote, blockquote.blockquote--center {
        text-align: center;
        border: none;
        padding-top: 2.5rem;
        padding-right: 0.325rem;
        padding-bottom: 0.325rem;
        padding-left: 0.325rem; }
        .blockquote-center blockquote:before, blockquote.blockquote--center:before {
          position: absolute;
          content: '';
          height: 10px;
          top: 40px;
          margin: 0 auto;
          left: 0;
          right: 0;
          width: 15%;
          background: #FFCD00;
          transition: 0.5s; }
      .blockquote-right blockquote, blockquote.blockquote--right {
        text-align: right;
        border-left: none;
        border-right: 8px solid #FFCD00;
        padding-top: 0.325rem;
        padding-right: 1.875rem;
        padding-bottom: 0.325rem;
        padding-left: 0; }
    
  • URL: /components/raw/blockquote/blockquote.css
  • Filesystem Path: src/components/blockquote/blockquote.css
  • Size: 1.7 KB
  • Content:
    @import '../../assets/scss/variables';
    @import '../../assets/scss/utilities';
    
    blockquote {
      font-weight: $font-weight-normal;
      font-style: none;
      font-family: $font-family-serif;
      border-left: 8px solid $primary;
      padding: $lg;
      font-size: 1.4rem;
      line-height: 1.7;
      @include padding($top: $xsm, $bottom: $xsm, $left: $lg);
    
      // border color overrides for certain background colors
      .bg--gray &,
      .bg--white &,
      .bg--gray &,
      .bg-pattern--brain &,
      .bg--white--pattern--brain & {
        border-color: $primary;
      }
    
      .bg-pattern--brain-reversed &,
      .bg--gold--pattern--brain &,
      .bg--gold & {
        border-color: #fff;
      }
    
      .bg--black--pattern--brain &,
      .bg-pattern--brain-black &,
      .bg--black & {
        border-color: $primary;
      }
    
    
      p {
        margin-top: 0;
        font-weight: $font-weight-normal;
        font-size: 1.4rem;
      }
    
      footer {
        font-family: $font-family-sans-serif;
        font-weight: $font-weight-bold;
        margin-top: $md;
        font-size: 1.2rem;
      }
    
      p+footer {
        margin-top: 0;
      }
    
      // @todo 2020/12/08 Remove '.blockquote-center' class in v4.0.0
      .blockquote-center &,
      &.blockquote--center {
        text-align: center;
        border: none;
        @include padding($top: $xlg, $bottom: $xsm, $left: $xsm, $right: $xsm);
    
        &:before {
          position: absolute;
          content: '';
          height: 10px;
          top: 40px;
          margin: 0 auto;
          left: 0;
          right: 0;
          width: 15%;
          background: $primary;
          -webkit-transition: 0.5s;
          transition: 0.5s;
        }
      }
    
      // @todo 2020/12/08 Remove '.blockquote-right' class in v4.0.0
      .blockquote-right &,
      &.blockquote--right {
        text-align: right;
        border-left: none;
        border-right: 8px solid $primary;
        @include padding($top: $xsm, $bottom: $xsm, $left: 0, $right: $lg);
      }
    }
    
  • URL: /components/raw/blockquote/blockquote.scss
  • Filesystem Path: src/components/blockquote/blockquote.scss
  • Size: 1.8 KB