<blockquote class="Blockquote" 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>
{
  "text": "Perferendis magnam deserunt eligendi et dolores et cupiditate dolorum omnis. Ullam ipsa dolores et dolores repellat repellendus dolorum laboriosam.",
  "style": null,
  "modifier": "Blockquote"
}
  • 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.