## Block styles

Product: Grafton - Blog & Magazine WordPress Theme
URL: https://hub.jkdevstudio.com/docs/grafton/styles-and-settings/block-styles
Updated: 2026-11-14
Summary: The block styles Grafton and Grafton Pro add to core blocks, what each one changes, and which block offers it in the Styles panel of the sidebar.

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

:::options

- **Small**: On Button. A compact button for rows, cards and toolbars.

- **Brand**: On Button. An orange button that turns dark on hover.

- **Light**: On Button. A white button for dark bands.

- **Label**: On Post Terms. The category as a small rounded tag on a translucent white chip, used over card pictures.

- **Pills**: 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.

- **Large corners**: On Image and Featured Image. A 24px corner radius, used on the featured image of a post.

- **Zoom on hover**: On Featured Image. The picture grows slightly inside its frame when the pointer is over it or over its card.

- **Muted**: On Navigation. Menu links at reduced strength that come to full color on hover.

:::

## From Grafton Pro

:::options

- **Parallax**: On Cover. The background picture moves slower than the page as you scroll.

- **Fit to width**: On Heading and Title. The text scales to fill the width of its column, for very large page titles.

- **With image**: On Title. A small rounded copy of the featured image sits inside the title, before the first word.

- **Numbers, page reload**: On Pagination. Page numbers that load a new page, the WordPress default.

- **Numbers, no reload**: On Pagination. Page numbers that swap the posts in place.

- **Load more**: On Pagination. One button that adds the next page of posts under the current ones.

- **Infinite scroll**: On Pagination. The next page of posts loads as the reader reaches the end of the list.

:::

<div data-callout="tip">

For visitors whose device asks for less motion, hover effects change at once instead of animating, and **Parallax** stays still.

</div>

Colors, fonts and radii of every style come from Styles, so they follow your palette. See [colors, fonts and style variations](https://hub.jkdevstudio.com/docs/grafton/styles-and-settings/colors-fonts-and-variations).