> For the complete documentation index, see [llms.txt](https://docs.morpht.com/convivial-for-govcms/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.morpht.com/convivial-for-govcms/content-editing/components/modifier-reference.md).

# Modifier reference

Every modifier and its fields, in alphabetical order. What modifiers are and when to use one is explained in [Modifiers](/convivial-for-govcms/concepts-and-tools/modifiers.md); 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](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-ead1bdf20335b7acbb3b04f90e48763832c07b0d%2Fm-adaptive-height-modifier.png?alt=media)

* **Adaptive height** — the ratio, e.g. `0.5` makes 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>

![Audience visibility](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-0a024466a0922e3f1f788c19190a6455ab668193%2Fm-audience-filter.png?alt=media)

## 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 background](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-d69c229d907b9a95c26c03a90d57564dc7e69721%2Fm-colour-background-modifier.png?alt=media)

## 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>

![Colour palette swap](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-f6a80464755ace2e835e5dc7d8ebb0b609dd4bc2%2Fm-colour-swap-modifier.png?alt=media)

* **Swap** — the palette to swap in.
* **Threshold** — how much of the component must be in the viewport before the swap, from `0` to `1`.
* **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>

![Linear gradient](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-727f9dc9575933dc69fe485fbc7ad856773b0599%2Fm-custom-linear-gradient-modifier.png?alt=media)

* **Custom linear gradient colours** — at least two colours.
* **Custom linear gradient direction** — in degrees; `180` is 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:

| CSS variable            | Description                |
| ----------------------- | -------------------------- |
| `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>

![Radial gradient](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-2863422078a218f2648f6d2bce9475766f07519f%2Fm-custom-radial-gradient-modifier.png?alt=media)

* **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>

![Image background](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-4b234ce1c6a099c1b726d9353e9825e333866e3e%2Fm-image-background-modifier.png?alt=media)

* **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>

![Padding](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-387397277a347cc6fcbe4bfa5c7f49b9d269e197%2Fm-padding-modifier.png?alt=media)

## 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 background](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-dd2c3843255ac498ffd2ac5e98170994099cbb34%2Fm-parallax-background-modifier.png?alt=media)

* **Parallax** — the image, with a **Background colour** fallback.
* **Parallax speed** — from `-1` to `2`; `1` scrolls with the page, `0` holds 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>

![Scroll reveal](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-59365aadc7391c9aec7e43fd98a143fbe654fc34%2Fm-scroll-reveal-modifier.png?alt=media)

* **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](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-40c7548b16c5be5eb82c374e517cbc304fa39acb%2Fm-video-background-modifier.png?alt=media)

* **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.