Gatsby: Create pullquote styles for .org site

Created on 27 Nov 2018  路  5Comments  路  Source: gatsbyjs/gatsby

Pulled out of #9847.

Points of consideration:

  • multiple styles (quote style, highlight style) -- as you've suggested, @greglobinski
  • implement using custom components

pull-quote-v1


pull-quote-v2

Most helpful comment

Love it! Looks great.

All 5 comments

New variations of the designs

  1. a quotation mark to indicate it's a quote added

screenshot from 2018-11-28 23-21-50

  1. the 'invisible' yellow color removed

screenshot from 2018-11-28 23-22-04

@lindaleebumblebee

Thank you. Both are great, but now I like the first one the best (with the box and 'stars') :)

There are three variants of the Pullquote, they differ only in stars' placement, if there are more that three Pullquote instances on the page, the variants application starts from the A variant again - A, B, C, A, B, ...

/ @lindaleebumblebee @amberleyromo

Desktop variants

screenshot from 2018-11-29 18-50-41
screenshot from 2018-11-29 18-51-10

Mobile variants

screenshot from 2018-11-29 19-01-50
screenshot from 2018-11-29 19-02-04
screenshot from 2018-11-29 19-02-26

Love it! Looks great.

Closed in #10190

Was this page helpful?
0 / 5 - 0 ratings