# Elegant Blockquote Styles (SCSS)

> Gives quotes in your posts a refined look with a large quotation mark, an accent border and a styled citation line.

- Type: SCSS
- Runs: Site-wide header
- Category: [Content](https://wpide.com/library/category/content/)
- Tags: scss, quotes, typography
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/styled-blockquotes-scss/

## Code

```scss
$accent: #2271b1;
$quote-size: 1.15em;

.entry-content,
.wp-block-post-content {
    blockquote,
    .wp-block-quote {
        position: relative;
        margin: 2em 0;
        padding: 0.5em 1.5em 0.5em 2.25em;
        border-left: 4px solid $accent;
        font-size: $quote-size;
        font-style: italic;

        &::before {
            content: "\201C";
            position: absolute;
            top: -0.15em;
            left: 0.25em;
            font-size: 3em;
            line-height: 1;
            color: rgba($accent, 0.35);
        }

        p:last-of-type {
            margin-bottom: 0;
        }

        cite {
            display: block;
            margin-top: 0.75em;
            font-size: 0.8em;
            font-style: normal;
            opacity: 0.75;

            &::before {
                content: "\2014\00a0";
            }
        }
    }
}
```

## Notes

Change the $accent variable to your brand color.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Elegant Blockquote Styles (SCSS)" in its snippet library and add it in one click; or create a new SCSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/