Patterns

Patterns are lightweight SVG tiles used as palette-aware backgrounds on banners and components. They are terms in the Pattern vocabulary: Manage → Structure → Taxonomy → Pattern → Add term (/admin/structure/taxonomy/manage/pattern/add).

See patterns on the demo site: https://govcms.convivial.io/demo/patterns

Adding a pattern

1. Upload the SVG to Tile as a File media item. The tile is used as a mask: only the shapes' opacity is read, and they are painted in the palette's Background stronger colour, so any colour in the file is ignored — this keeps contrast accessible. Two rules for the artwork:

   • Shapes must be fully opaque — fill="none" or any transparency masks the shape out. Use outlines, not strokes.

   • Run every path past the edge of the tile and let it clip, or a visible seam appears where the tile repeats.

2. Set the tile Size in rem (from 0.25, in quarter steps) and its Position. Several patterns can share one tile at different sizes — make a term per variant.

3. Set Repeat X and Repeat Y:

   • Space — the tile keeps its size; only whole tiles are drawn and the leftover space becomes even gaps.

   • Round — the tile is rescaled so there are no gaps. Each axis rounds independently, so the tile may distort slightly.

   • Repeat — the tile keeps its size with no gaps; the overflow is clipped at the edge of the component.

Patterns in use

Editors apply a pattern from the Pattern field under a component's Presentation — see Presentation. The page banner takes its pattern from the skin's Regions tab instead. Combine patterns with textures for richer backgrounds.