Block styles - Grafton
A block style is a ready look for a core block. Select the block, open Styles in the block sidebar and click one. Nothing needs a class name, and switching back to Default removes it.
#From the theme
On Button. A compact button for rows, cards and toolbars.
On Button. An orange button that turns dark on hover.
On Button. A white button for dark bands.
On Post Terms. The category as a small rounded tag on a translucent white chip, used over card pictures.
On Post Terms, Tag Cloud and Categories List. Each term as a rounded chip with a hairline frame that fills dark on hover. The tags under a post and the category row of the blog use it.
On Image and Featured Image. A 24px corner radius, used on the featured image of a post.
On Featured Image. The picture grows slightly inside its frame when the pointer is over it or over its card.
On Navigation. Menu links at reduced strength that come to full color on hover.
#From Grafton Pro
On Cover. The background picture moves slower than the page as you scroll.
On Heading and Title. The text scales to fill the width of its column, for very large page titles.
On Title. A small rounded copy of the featured image sits inside the title, before the first word.
On Pagination. Page numbers that load a new page, the WordPress default.
On Pagination. Page numbers that swap the posts in place.
On Pagination. One button that adds the next page of posts under the current ones.
On Pagination. The next page of posts loads as the reader reaches the end of the list.
For visitors whose device asks for less motion, hover effects change at once instead of animating, and Parallax stays still.
Colors, fonts and radii of every style come from Styles, so they follow your palette. See colors, fonts and style variations.
Last updated
Was this article helpful?
On this page
