Examples of patterns
This is a pattern playground exploring what can be done natively using minimal styling and native blocks.
Where custom CSS has been used it will be noted.
Every example is done using the Twenty Twenty One theme.
| Name | Custom CSS | Contains | Industry |
|---|---|---|---|
| No | |||
| No | Column blocks (using offset) | ||
| No | Cover image as coming soon |
Full templates
These are larger pattern collections exploring how things can fit together.
| Name | Custom CSS | Contains | Industry |
|---|---|---|---|
| No | Cover image, gallery, quote, fixed background | ||
| No | Cover | Social cover profile | |
| No | Portfolio | ||
| No | Cover image, column block | ||
| Yes | Portfolio, reviews block | ||
| Yes | Dual and large staggered block sections | ||
| Yes | |||
| No |
Animation / custom CSS
Examples that bring in extra animation/custom CSS. I have a custom CSS box on the page that outputs each CSS.
| Name | Custom CSS | Contains | Industry |
|---|---|---|---|
| Yes | Loads images fading upwards in columns | ||
| Yes | Cover images, top positioning | ||
| Yes |
Experiments in blocks
Experimenting around styling in blocks
| Name | Custom CSS | Contains | Industry |
|---|---|---|---|
| No | Split image gradients | ||
| No | Columns in grid with cover | ||
| No | Grid full template with heading full-width sections | ||
| No | Overlapping blocks | ||
| No | |||
| No | Circle styles | ||
| Yes | |||
| No | Angles and divides |