Fabled.day

contents

Creating Pullquotes

You can view a live demonstration of this snippet on Codepen, and even play with it a bit. The version I've provided fits a very sedate aesthetic but should be easily customizable for yours...

Pullquotes are those little snippets of text, usually in magazines and newspapers (online or off) giving a short bit of the article in larger font for emphasis. There are some reasons you might want to use traditional pullquotes (ie, those which simply pull a quote from the article) on your site.

Mostly, though, pullquotes online might be used to add extra quotations, with links to their sources directly following. Either is possible really, because it just uses a simple blockquote format. Well, that is, it uses a simple blockquote format along with the <small> tag just before the </blockquote> tag. This acts as a simple container for the quote source. I believe this works better than sticking a whole <div> in there.

This example and format assumes the quote is relatively short and small. I will be uploading a second version soon, more adapted to larger quotations. You may be able to play with this one a bit and figure out ways of creating larger versions, but for now, keep it short and sweet.

CSS

You'll probably want to change the colors and play with things a bit, since your site likely looks completely different than the demonstration here, which shows exactly what these colors look like. You can achieve some interesting effects by adding shadows as well, but those you can try for yourself...

HTML

Rather straightforward, isn't it? the only really custom feature is the addition of the <small> tag as a way of showing the source of the pullquote, and perhaps even linking to it. The below example quotes Mary Wollstonecraft's Vindication of the Rights of Woman from 1792. In this example, the pullquote floats to the left and is 20% of the screen width; this can be adjusted within the CSS as you likely saw above. In either case, please put it before the text content you'd like it to enfold...

top