Blockquote Design

Designing a Pull Quote with CSS – Made by Mystie Personal Portfolio Website Design

As I was working on some blog posts and documenting my progress building out my rebrand identity and portfolio website, I realized the pull quotes needed some work. This opportunity gave me another chance to continue to add personal branded UI assets to the in-progress design system.

For this project, I wanted to take the standard HMTL blockquote used in my Phlox WordPress theme and use CSS and CSS Pseudo-elements to transform the text quotes into a contextually relevant and visually attractive pull quote. The quote would essentially pull attention in my case studies and blogs with some slight HTML markup. Additionally, I wanted to ensure semantically cited quotes.

I used CodePen to work out the relationships between the HTML and CSS by replicating some layout markup from my WordPress Elementor Text Editor. The simplified layout code included an h4 and h5 and a series of paragraph elements with replicated text from another post and two blockquote elements.

HTML Semantic Author Attribution

I had at least two artist attribution quotes to cite. Still, as I was researching blockquote best practices, I came across many articles that mentioned the cite tag should be used to reference creative work, and not the person responsible for the quote.

A blockquote is used in conjunction with a figure and figcaption to relate a quote to its attribution (WC3). So I wrapped both the blockquote and figcaption in figure<//code> tags for a more semantic read.

                    
<figure class="quote">
    <blockquote>
        <span class="low-highlight">
            Design is thinking made visual.
        </span>
    </blockquote>
    <figcaption>
        —Saul Bass
    </figcaption>
</figure>                    
                

HTML & CSS Low-highlight Effect

Since the blockquote is a block-level object, setting the background will set the color for the whole block. To create the inline highlight, I applied a span with a “low highlight” class to all the text within the blockquoteso that the blockquote remains a block element, but the inline content can have that highlighted style.

The trick to achieving the low-highlight effect is to use a gradient background. I set the background property with the linear-gradient value setting the angle to 180 degrees such that the “gradient” is vertical (top to bottom). The first, or top, color is set to transparent so that the background shows through, and for the second, or bottom, color, I chose the brand Broom (yellow) color to allude to the typical marker.

                    
/*low highlight*/
.low-highlight{
    background: linear-gradient(180deg, rgba(255,255,255,0) 65%, #ffe91c 65%);
    display: inline;
}                    
                

CSS * Selector

Box model layout design

So that I can better see the relationship between all my elements, I like to select all of the elements and apply a thin cyan border to show the box model in action. I can comment out these rules afterwords.

                    
/*box model layout boxes*/
*{
  border: 1px solid cyan;
}                    
                

CSS Pull Quote

Base blockquote style

To bring more of the brand style into the design, I targeted the blockquote with the blockquote selector. Then within the brackets, I first focused on the font and colorproperties.

For the font, I wanted to create some context from the UI sans-serif typefaces by using a slab-serif typewriter-style like the one used in the logo sub-head. Color-wise, I thought I could also add some warmth with the ballpoint-pen ink-like Diesel color.

I choose the Google Special Elite font because of its inked-up grungy and old-school analog flavor. A typewriter font style adds a hint of vintage in its retro nostalgia but also suggests a personal work ethic and developmental process, all of which aspects likened back to my brand.

                    
/*blockquote*/
blockquote{
  font: normal 1.8em/1.8em "Special Elite", serif;
  color: #230100;
}                    
                

Pseudo-element Quotations

I used CSS pseudo-elements to add more massive double quote marks to the beginning and end of the blockquote elements. According to CSS-tricks, pseudo-elements are the way modern browsers are handling quotations, so there is no risk of duplicates since new browsers will overwrite the default. Older browsers that still support pseudo-elements will always add them.

Quotes

I, therefore, used the quotes property to specify the types of used quotes and indicated when added via the content: open-quote; and content: close-quote; rules. I included four values to the quotes property targeted in the blockquote selector: a set of double smart quotes, and a set of single, smart quotes. The first pair of quotes in the value are the opening and closing quotes. The second pair is for nested quotes.

[Note: In Elementor, the end quote was aligning as a block element, so I added a display property with a value of inline to the after pseudo-element of the blockquote selector.]

To add further contrast and appeal, I wanted to make the quote marks larger, and the Broom (yellow) brand color for added consistency. I targeted both pseudo-elements with one rule to which I applied a font-size property and a color property. I used the line-height and vertical-align properties to position the marks around the text better.

Hanging Punctuation

I wanted to extend the opening quotation mark so that the margins of the quote’s left-justified edge flushed and gave the appearance a more uniform vertical alignment.

In CSS, I did this by using a negative value on the text-indent property. I used a red border-left property to help with adjusting the spacing. Again, I can comment-out or delete when ready to publish.

                    
/*blockquote*/
blockquote{
  quotes: "“" "”" "‘" "’";
  font: normal 1.8em/1.8em "Special Elite", serif;
  color: #230100;
  text-indent: -1.9em;
/*   show text-indent */
  border-left: 2px solid red;
}

blockquote::before {
  content: open-quote;
}

blockquote::after {
  content: close-quote;
  display: inline;
}

blockquote::before, blockquote::after {
  font-size: 4em;
  color: #ffe91c;
  line-height: .1em;
  vertical-align: -.4em;
}                    
                

Author Attribution

I targeted the figcaption selector within the .quote class so that not every figcaption on the site would be styled the same way as a specific author attribution. Handwriting fonts are full of character and suitable for representing personal connection and as a way to stand out, enhancing flair and creatively.

Figcaption

LTR positioning hierarchy

The quote figcaption is secondary in the hierarchy to the blockquote text itself, so I wanted to denote that status within the design. Since my content is also in a language that flows left to right (ltr), I correctly aligned the author’s name to the right so that it read more like a signature or autograph.

Handwritten Type

Along with the idea of a name as a signature, I chose the Reenie Beanie Google font because of its legible ball-point pen handwriting in a playful and loose look, and because I was already using it as a secondary illustrative UI typeface in my case-studies. The Boulder (grey) color helps situate its relative importance by adding an average balance of tone.

                    
/*figcaption author attribute*/
.quote figcaption {
  width: 91%;
  font: normal 1.8em/1.3em "Reenie Beanie", sans-serif;
  color: #787878;
  text-align: right;
}                    
                

Figure Space

Looking at these two objects, I wanted to increase the likeliness that the entire figure would render as a whole form. I used the gestalt principle of proximity, wherein I grouped the blockquote and figcaption within the figure quote class to create a more significant association.

Proximity

I decreased the figure’s width and added negative space on the top and bottom margin to bring the enclosed elements further closer together. They are most likely automatically paired in the viewer’s eyes.

                    
/* Figure */
.quote{
    width: 65%;
    margin: 4em auto 4em auto;
}                    
                

Adjustments

The final set of rules were for devices with screen sizes under 768 pixels wide, such as tablets, and devices with screen sizes under 360 pixels wide, such as smartphones.

Media Queries for small screens

For smaller screens, the font-sizes decrease, and the text-indent needs adjusting. I also made some minor adjustments to the overall width to make the best use of the smaller display spaces.

                    
@media screen and (max-width: 768px){
  blockquote{
    font: normal 1.3em/1.8em "Special Elite";
    text-indent: -1.5em;
  }
  blockquote::before, blockquote::after {
    font-size: 3em;
  }
  .quote{
      width: 100%;
  }
  .quote figcaption {
    width: 88%;
  }
}

@media screen and (max-width: 360px){
  blockquote{
    font: normal 1.3em/1.8em "Special Elite";
    text-indent: -1.4em;
  }
  blockquote::before, blockquote::after {
    font-size: 3em;
  }
  .quote{
      width: 100%;
  }
  .quote figcaption {
    width: 85%;
  }
}                    
                
1600px
768px
360px

Comments are closed.