Modifier reference
Every modifier and its fields, in alphabetical order. What modifiers are and when to use one is explained in Modifiers; they are added under Presentation → Modifiers on any component with Add Modifier, and a component can have several.
Most modifiers have a Media query field. Leave it empty to apply the modifier at every screen size, or enter a query such as (min-width: 768px) to apply it only above that width. Two modifiers of the same type — one with a media query, one without — let you set different values for mobile and desktop.
Adaptive Height Modifier
Gives the component a minimum height relative to its width — an aspect ratio — so a background image shows fully on narrow screens but does not become enormous on wide ones.
See the adaptive height modifier on the demo site: https://govcms.convivial.io/demo/modifiers/adaptive-height-modifier
Adaptive height — the ratio, e.g.
0.5makes a 1000px-wide component at least 500px tall.Comparison — measure against the Content width or the Screen height.
Limit — the pixel width beyond which the height stops growing.
Vertical align — where the content sits within the extra height.
Use it for hero backgrounds and whenever a custom aspect ratio is needed.
Audience Visibility Modifier
Shows the component only to visitors in the selected Audiences. The visitor's audience comes from their profile settings or personalisation; Default audience is used when none has been set. Everyone else does not see the component at all.
See the audience visibility modifier on the demo site: https://govcms.convivial.io/demo/modifiers/audience-filter
Colour Background Modifier
Sets a background colour. Any CSS colour works: #FFFFFF, rgba(255,255,255,1), red. Hover background colour and Duration add a transition on hover.
See the colour background modifier on the demo site: https://govcms.convivial.io/demo/modifiers/colour-background-modifier
Colour Palette Swap Modifier
Swaps the component's palette for another as it scrolls into view. Apply a Palette under Presentation first.
See the colour palette swap modifier on the demo site: https://govcms.convivial.io/demo/modifiers/colour-swap-modifier
Swap — the palette to swap in.
Threshold — how much of the component must be in the viewport before the swap, from
0to1.Duration — the transition, in milliseconds.
Custom Linear Gradient Modifier
A background gradient between two or more colours.
See the custom linear gradient modifier on the demo site: https://govcms.convivial.io/demo/modifiers/custom-linear-gradient-modifier
Custom linear gradient colours — at least two colours.
Custom linear gradient direction — in degrees;
180is top to bottom.
Accessibility and dark mode
Gradients must stay legible in both the light and dark colour schemes.
Use custom colour values only if you are certain they have sufficient contrast in both schemes.
Prefer the built-in CSS variables, which follow the palette and adjust automatically. Each palette's background is available at ten opacities:
var(--background-010)
Background at 10% opacity
var(--background-020)
Background at 20% opacity
var(--background-030)
Background at 30% opacity
var(--background-040)
Background at 40% opacity
var(--background-050)
Background at 50% opacity
var(--background-060)
Background at 60% opacity
var(--background-070)
Background at 70% opacity
var(--background-080)
Background at 80% opacity
var(--background-090)
Background at 90% opacity
var(--background)
Background at 100% opacity
The same ten steps exist for the stronger background and the highlight colour: var(--background-stronger-010) … var(--background-stronger-100) and var(--highlight-010) … var(--highlight-100).
Custom Radial Gradient Modifier
A background gradient radiating from a point. The accessibility note above applies.
See the custom radial gradient modifier on the demo site: https://govcms.convivial.io/demo/modifiers/custom-radial-gradient-modifier
Custom radial gradient colours — at least two colours.
Radial gradient position, shape (Circle or Ellipse) and size (Closest side, Closest corner, Farthest side, Farthest corner).
Hide Modifier
Hides the component. Combined with a Media query it hides the component only at some screen sizes:
(min-width: 768px)hides it on screens 768px and wider.(max-width: 767px)hides it on screens narrower than 768px.
Use it to show a different component on mobile and desktop, or to take a component out of the page temporarily without deleting it.
Image Background Modifier
A static background image.
See the image background modifier on the demo site: https://govcms.convivial.io/demo/modifiers/image-background-modifier
Background image — the image, with a Background colour fallback while it loads.
Image style — Stretch, Contain, No repeat, Repeat, Repeat X, Repeat Y.
Image position — which part of the image stays visible when it is cropped.
Pan and zoom — an optional slow animation.
Add an Overlay under Presentation so text stays readable.
Padding Modifier
Extra space inside the component, set separately for Top, Right, Bottom and Left with a size and unit (rem, px, % …).
See the padding modifier on the demo site: https://govcms.convivial.io/demo/modifiers/padding-modifier
Parallax Background Modifier
A background image that scrolls at a different speed from the page.
See the parallax background modifier on the demo site: https://govcms.convivial.io/demo/modifiers/parallax-background-modifier
Parallax — the image, with a Background colour fallback.
Parallax speed — from
-1to2;1scrolls with the page,0holds the image still.
Scroll Reveal Modifier
Eases the component in as the visitor scrolls to it. With a Sequence selector it reveals child items one after another — for Node Lists and Item Lists, use the item selector so cards appear in turn.
See the scroll reveal modifier on the demo site: https://govcms.convivial.io/demo/modifiers/scroll-reveal-modifier
Origin — the direction it moves from; Distance — how far, e.g.
20px; Opacity and Scale — the starting values.Duration and Delay — in milliseconds; Sequence interval — the gap between items.
Mobile — untick to skip the animation on phones.
Video Background Modifier
A looping, muted video behind the component. YouTube is the only supported provider.
See the video background modifier on the demo site: https://govcms.convivial.io/demo/modifiers/video-background-modifier
Video background — the remote video.
Image — a fallback image shown while the video loads and on devices that block autoplay, with a Background colour behind it.
A pause button is added over the video automatically — accessibility rules require a way to stop moving content — and the video does not autoplay for visitors who have asked their device for reduced motion.
Last updated