Collection

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.

NameCustom CSSContainsIndustry
  • Business card modern
  • No
  • Various about blocks
  • NoColumn blocks (using offset)
  • Coming soon
  • NoCover image as coming soon

    Full templates

    These are larger pattern collections exploring how things can fit together.

    NameCustom CSSContainsIndustry
  • Welcome home interior designs
  • NoCover image, gallery, quote, fixed background
  • Cover profile
  • NoCoverSocial cover profile
  • gallery + video
  • NoPortfolio
  • Cover block
  • No Cover image, column block
  • Cover dual
  • YesPortfolio, reviews block
  • Staggered blocks
  • YesDual and large staggered block sections
  • Stagged blocks strong
  • Yes
  • Landing page traditional
  • 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.

    NameCustom CSSContainsIndustry
  • Breathing images
  • YesLoads images fading upwards in columns
  • Subscription page
  • YesCover images, top positioning
  • Sliding in puppy circle
  • Yes

    Experiments in blocks

    Experimenting around styling in blocks

    NameCustom CSSContainsIndustry
  • Split covers
  • NoSplit image gradients
  • Grid blocks
  • NoColumns in grid with cover
  • Cover block
  • NoGrid full template with heading full-width sections
  • Using columns
  • NoOverlapping blocks
  • Media and text
  • No
  • Image styling
  • NoCircle styles
  • Column experiments
  • Yes
  • Cover block with gradients
  • NoAngles and divides