600 West

Blockquote 

<!-- Default -->
<blockquote class="" style="">Perferendis magnam deserunt eligendi et dolores et cupiditate dolorum omnis. Ullam ipsa dolores et dolores repellat repellendus dolorum laboriosam.</blockquote>


<!-- Small -->
<blockquote class="_small" style="">Perferendis magnam deserunt eligendi et dolores et cupiditate dolorum omnis. Ullam ipsa dolores et dolores repellat repellendus dolorum laboriosam.</blockquote>


<!-- Large -->
<blockquote class="_large" style="">Perferendis magnam deserunt eligendi et dolores et cupiditate dolorum omnis. Ullam ipsa dolores et dolores repellat repellendus dolorum laboriosam.</blockquote>


<!-- Blockquote -->
<blockquote class="Blockquote" style="">Perferendis magnam deserunt eligendi et dolores et cupiditate dolorum omnis. Ullam ipsa dolores et dolores repellat repellendus dolorum laboriosam.</blockquote>


<!-- Big Quotation Marks -->
<blockquote class="Blockquote--bigQuotation" style="">Perferendis magnam deserunt eligendi et dolores et cupiditate dolorum omnis. Ullam ipsa dolores et dolores repellat repellendus dolorum laboriosam.</blockquote>


<blockquote class="{{modifier}}" style="{{style}}">{{{text}}}</blockquote>
 
/* Default */
{
  "text": "Perferendis magnam deserunt eligendi et dolores et cupiditate dolorum omnis. Ullam ipsa dolores et dolores repellat repellendus dolorum laboriosam.",
  "style": null
}


/* Small */
{
  "text": "Perferendis magnam deserunt eligendi et dolores et cupiditate dolorum omnis. Ullam ipsa dolores et dolores repellat repellendus dolorum laboriosam.",
  "style": null,
  "modifier": "_small"
}


/* Large */
{
  "text": "Perferendis magnam deserunt eligendi et dolores et cupiditate dolorum omnis. Ullam ipsa dolores et dolores repellat repellendus dolorum laboriosam.",
  "style": null,
  "modifier": "_large"
}


/* Blockquote */
{
  "text": "Perferendis magnam deserunt eligendi et dolores et cupiditate dolorum omnis. Ullam ipsa dolores et dolores repellat repellendus dolorum laboriosam.",
  "style": null,
  "modifier": "Blockquote"
}


/* Big Quotation Marks */
{
  "text": "Perferendis magnam deserunt eligendi et dolores et cupiditate dolorum omnis. Ullam ipsa dolores et dolores repellat repellendus dolorum laboriosam.",
  "style": null,
  "modifier": "Blockquote--bigQuotation"
}
  • Content: 
    blockquote {
    @include font-size-lead;
    position: relative;
    &._small {
        @include font-size-large;
    }
    &._large {
        @include font-size-subhead;
    }
    &::before,
    &::after {
        speak: none;
    }
    &::before {
        position: absolute;
        left: -.5em;
        content: "\201C";
    }
    &::after {
        content: "\201D";
    }
    @media #{$mobile-media} {
        &::before {
            position: static;
        }
    }
}
.Blockquote {
    max-width: 100%;
    padding: 0;
    border: none;
    &-quote {
        @include font-size-subhead;
        display: inline;
        font-family: $font-family-blockquote;
        &::before {
            position: absolute;
            left: -.75rem;
            content: "“";
        }
        &::after {
            content: "”";
        }
    }
    &-link {
        @include triangle-dingus($container-side: "left", $side-position: "center", $size: 6px, $color: get-color(neutral, 300));
        position: relative;
        display: inline-block;
        padding: .25rem;
        margin-top: 0;
        margin-left: .75rem;
        color: theme-color(text, inverse);
        background: get-color(neutral, 300);
        border-radius: $Border-radius--500;
        .icon::after {
            display: block;
        }
        &:hover {
            text-decoration: none;
            background: get-network-color(twitter);
            &::before {
                border-right-color: get-network-color(twitter);
            }
        }
    }
    &-cite {
        @include font-size-small;
        display: block;
        margin-top: 1.5rem;
        margin-bottom: 0;
        font-style: normal;
        a {
            @include font-weight-semibold;
            @include font-size-fine;
        }
    }
    // This is to overwrite global `<blockquote>` styles
    &::before,
    &::after {
        content: "";
    }
}
.Blockquote--bigQuotation {
    &::before,
    &::after {
        display: inline-block;
        color: theme-color(main);
        transform: scale(2.5) translateY(12%);
    }
    &::before {
        padding-right: Space(300);
        content: "“";
    }
    &::after {
        padding-left: Space(300);
        content: "”";
    }
}
  • URL: /components/raw/blockquote/Blockquote.scss
  • Filesystem Path: components/atoms/Blockquote/Blockquote.scss
  • Size: 2.3 KB

There are no notes for this item.