The kit
Elements [30]
Fancy Blockquote
Single element
Fancy Blockquote
A styled quote with the author’s name, role and photo, in seven design styles. Add a Click to Tweet button so visitors can share the quote in one click.
Design styles
Default + 6 Pro styles
Author tag
H1 to H6
Sharing
Click to Tweet button
Default
We rebuilt our whole homepage in an afternoon. The new layout doubled our sign-ups in the first month.
Pull Quote · Pro
Good design is invisible. Visitors only notice it when it gets in their way.
Card · Pro
The design system finally feels like one product. Every page we add now looks finished from day one.
Gradient · Pro
Page speed went from a worry to a selling point. Our largest pages now load in under a second.
Magazine · Pro
The best websites tell one clear story, and every section on the page moves that story forward.
Highlight Strip · Pro
Support replied within the hour and fixed the issue on our live site before lunch.Speech Bubble · Pro
Since the redesign, more of our enquiries turn into booked appointments.
Every style uses the same quote, author, citation and image settings. Switch between them with the Design Style option.
Example of fancy blockquote with the Boxed skin, centred text and a Click to Tweet button…
Good design is invisible. Visitors only notice it when it gets in their way.Share this quote
Example of fancy blockquote with a coloured border, H5 author name and custom padding…
We stopped arguing about spacing and colours. The components just look right wherever we drop them.
Example of fancy blockquote with the Card design and a custom quote icon…
Our editors publish landing pages on their own now, without waiting for a developer.
Use cases
Key features
What the element does, in plain terms. Every individual control is listed in the settings reference below.
Layout
Seven design styles
The Default quote plus six Pro layouts: Pull Quote, Card, Gradient, Magazine, Highlight Strip and Speech Bubble.
Skins and alignment
The Default design comes in Border, Boxed and Clean skins, aligned left, centre or right.
Content
Author details
Show the author’s name with a selectable heading tag, a role or company line and an optional portrait with alt text.
Quote icon
Pick any Font Awesome icon to show above the quote, or hide it.
Sharing
Click to Tweet
Add a button that opens a pre-filled tweet with the quote, an optional username and a link back to the page.
Styling
Colour controls
Quote, author, citation, icon, border, background and accent colours, each with a hover state.
Padding
Set the padding on each side of the Default design.
Settings reference
Every setting the element exposes, grouped by builder tab. Options are listed where the setting offers a fixed set of choices.
Content General tab
Design Style
Default · Pull Quote · Card · Gradient · Magazine · Highlight Strip · Speech Bubble
The layout of the quote. All styles except Default come with Pro.
Quote
Rich text
The quote text.
Author
Text
The name of the person being quoted.
Citation
Text
A role, company or source shown below the author.
Author Image
Image upload
An optional portrait shown with the citation.
Image Alt Text
Text
Describes the image for screen readers. Leave empty to use the author’s name. Shown when an image is set.
CSS Class
Adds a class to the wrapping HTML element.
CSS ID
Adds an ID to the wrapping HTML element.
Click to Tweet General tab, Default design
Click to Tweet
Yes · No
Adds a button that opens a pre-filled tweet of the quote. Default No.
Tweet Text
Text
The text to tweet. Leave empty to use the quote itself.
Tweet Via (@username)
Text
An optional X username to credit, without the @.
Tweet URL
Text
An optional link to add to the tweet. Leave empty to use the current page.
Tweet Button Label
Text. Default Click to Tweet
The text on the button.
Tweet Color
Colour, with hover. Default #65bc7b
The colour of the tweet button. Pro designs use it as their accent colour. Shown when Click to Tweet is Yes.
Layout Design tab
Skin
Border · Boxed · Clean
The look of the Default design. Default Border.
Alignment
Left · Center · Right
The text alignment of the Default and Pull Quote designs. Default Left.
Author Name Size
H1 · H2 · H3 · H4 · H5 · H6
The HTML tag used for the author’s name. Default H4.
Show Quote Icon
Yes · No
Shows an icon above the quote on the Default, Card and Highlight Strip designs. Default Yes.
Quote Icon
Icon picker. Default quote-right
The icon shown when Show Quote Icon is Yes.
Padding
Top · Right · Bottom · Left
Padding inside the Default design, for example 20px or 1.5em. Leave empty for the skin’s default.
Colours Design tab, Default design
Quote Text Color
Colour, with hover. Default #333333
The colour of the quote text.
Border Color
Colour, with hover
The colour of the left border on the Border skin.
Author Color
Colour, with hover. Default #222222
The colour of the author’s name.
Citation Color
Colour, with hover. Default #888888
The colour of the citation line.
Icon Color
Colour, with hover. Default #65bc7b
The colour of the quote icon.
Background Color
Colour, with hover
The background of the quote box.
On this page