Vignette

Media and text with a twist.

Usage

The Vignette block uses the common ‘Media and Text’ UX pattern, but allows you to display the pattern in visually exciting ways. The Style setting can drastically change how this block looks. Switching between styles doesn’t change your content at all, so feel free to try them and see which one you like best.

Offset Background

Text Background

Magazine

Flexible Magazine

Content Fields

The Vignette has the same content fields as the Photo Feature, and works in the same way. Each Vignette can have a Photo, Headline, Subheadline, Body, and Link. If you delete either your Headline or Subheadline field, it will disappear from the block and no longer be editable inline. Don’t worry, you can type either into the block editor sidebar to get it back.

The Headline field is set as an <h2> tag, and the Subheadline field is set as an <h4> tag. The Body can hold multiple paragraphs.

To change the Photo, you can either click on the photo in the block editor or change it in the block editor sidebar. Both will bring up the media library, where you can upload or choose an image.

Choosing a Link in the block sidebar will display a button beneath your content. The Button Text defaults to ‘Learn More’, but you can click into the button and edit this text inline or in the sidebar. You can toggle the Link Style to display as a button or as an understated link.

Style

You can radically change the appearance of the Vignette with the Style setting. The Default setting works the same was as the Photo and Text block. The other styles include Offset Background, Text Background, Magazine, and Flexible Magazine.

Each style changes how the Accent Color, Opacity, and Magnitude settings interact with each other. In general, the Accent Color will change the color underneath your text while Opacity will change the opacity of the Accent Color.

Reverse Print

Toggling reverse print will flip the colors from your standard palette to white, which increases contrast and readability when text is placed on dark backgrounds.

You’ll find the reverse print toggle in the block sidebar. Enabling reverse print will affect the block its enabled on as well as everything inside of it. If the block contains Inner Blocks, reverse print will cascade to all descendants.

We recommend using reverse print whenever a block has a dark background and using white text would increase its contrast. While you can set text color on core blocks like Headings and Paragraphs, we strongly recommend using the block-level reverse print instead. This way, you’ll be able to quickly toggle all the content if you change the background color in the future. All Inner Blocks will respect the reverse print setting, even those without color settings themselves.

To read more about contrast requirements on the web, visit here.

Show More Show Less

Magnitude

This setting is a little unique. In general, the Magnitude setting will increase the visual effect that the selected Style applies to the Vignette. For example, with Text Background selected, increasing the Magnitude of the effect will increase the amount that the text overlaps the photo.

Magnitude set to 2

Magnitude set to 10

You’ll also notice that the Magnitude value ranges from -10 to 10. With some vignette styles, the visual effect can reverse direction, and this is represented by a negative Magnitude value. For example, the Offset Background style can veer towards the right or left of the photo. In the example below, compare the positive and negative Magnitude values.

Magnitude set to 6

Magnitude set to -6

Offset Background

The Offset Background creates a shadow of the photo colored by the Accent Color, displayed underneath and offset from it. The distance that the shadow is offset is controlled with the Magnitude setting.

Text Background

The Text Background creates a background behind the text colored by the Accent Color. The Magnitude settings controls how much the text overlaps the photo.

Magazine

The Magazine creates a background behind the text that mirrors the length of the text, similar to the style seen in magazines. The text background is colored by the Accent Color. The Magnitude settings controls how much the text overlaps the photo.

Flexible Magazine

This block is the same as the above Magazine block, but allows for flexible width. With this block, as you increase the Magnitude, instead of holding the width steady and just increasing the overlap, it pushes the content and photo together and allows the width to be fluid. The typography leading also remains fluid.