Use patterns as layoutsΒΆ
Patterns can be used as layouts thanks to the ui_patterns_layouts
module.
Once exposed as layouts patterns can be used to arrange fields on entities like nodes, paragraphs, etc. or to place blocks on a page using Panels.
In the example below we will style a Jumbotron paragraph using the Jumbotron paragraph.
Once on the paragraph Manage display page we choose the Jumbotron pattern as layout:

After doing that the pattern fields will be exposed as layout regions, so given the following definition:
jumbotron:
label: Jumbotron
description: A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.
fields:
title:
type: text
label: Title
description: Jumbotron title.
preview: Hello, world!
subtitle:
type: text
label: Description
description: Jumbotron description.
preview: This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
We will get the following layout regions:

We can now arrange the paragraph fields on the layout and save our settings.
The paragraph below:

will be now styled using the Jumbotron pattern as follows:
