Presentation
Every component has a Presentation group at the bottom of its form. Its fields control how the component looks without changing its content.
Style
Cosmetic styles applied to the component. Select more than one with Ctrl-click (Windows) or Cmd-click (Mac). The options vary a little by component; the common ones are:
Breakout — extend the component to the full width of the window on pages that otherwise keep components in the content column.
Display — larger, display-style heading.
Hero — extra top and bottom padding to make the component bigger.
No background padding — remove all padding inside the component, even when a palette is applied.
No side gaps, No column gaps, No row gaps — remove the padding at the sides and the gaps between columns and rows of a list or section; use the three together for a true edge-to-edge grid.
Text left, Text center, Text right — align the text.
Text shadow — for text over a background image.
Equal height — make columns the same height (Section).
Align items center — vertically centre columns (Section).
Hide info — hide the info label on list items.
Transparent card — make image cards and basic cards slightly transparent (Item List).
Push down and Pull up — overlapping layouts; see below.
See breakout components on the demo site: https://govcms.convivial.io/demo/content/test-edgy-page
Layout
Where the component's heading and introduction (side) sit relative to its main content (main), as a twelve-column split: Main (12) stacks them; Side (3) Main (9) puts the heading in a narrow left column; Main (8) Gap (1) Side (3) puts it on the right with a gap; and so on.
Position
The width of the component and where it sits: Left, Center or Right, at 33%, 50% or 66% of the content width. Leave empty for full width. How Layout and Position work together with the heading is explained in Component header.
See arrangements on the demo site: https://govcms.convivial.io/demo/arrangements
Palette
The colour palette for the component: Standard, Alternate, Primary, Secondary, Accent or Neutral. Each palette has a light and a dark version, and the site switches between them with the visitor's colour scheme. Themers define the colours. See Palettes.
See colour palettes on the demo site: https://govcms.convivial.io/demo/colour-palettes
Texture
A gradient over the palette background that adds depth without an image: Linear from an edge or corner, Radial spotlight or vignette, or Conic from a corner. See Textures.
Pattern
A tiled SVG pattern painted in the palette colour. Patterns are defined by Themers — see Patterns — and chosen here from the list. Combine a pattern with a texture for a richer background.
See patterns on the demo site: https://govcms.convivial.io/demo/patterns
Overlay
A tint or gradient laid over a background image so the text on top stays legible: Linear from an edge, Radial from the centre, or a Tint at strong, medium or weak opacity. Content inside the component also gets a drop shadow. See Overlays.
See a banner overlay on the demo site: https://govcms.convivial.io/demo/content/test-banner-background-image
Adding modifiers
Background images, gradients, padding and animations are added under Modifiers — see Modifiers for the idea and the Modifier reference for every field.
View modes
List components — Node List, Item List, Media List, Slider — have a View mode that sets how each item is drawn: a stacked card, an image card, a teaser, a summary line and so on.
See view modes on the demo site: https://govcms.convivial.io/demo/view-modes
Overlapping components (Pull up / Push down)
Two styles let a component overlap the one above it — typically cards pulled up over a hero or a coloured section.
On the upper component, select the Push down style. It adds extra bottom padding so its own content is not covered.
On the lower component, select the Pull up style. It shifts the component upward into that padding.
This is designed for cards in a Node List or Item List. Tick Hide heading on the pulled-up list, and if the upper component uses the Hero style, give both components the Hero style too. Avoid mixing a dark and a light palette between the two components — the overlap makes contrast hard to guarantee.
Last updated