Backgrounds
Which background to set behind a marketing hero, section or card, and how to render it at any size.
A background gives a section its mood without competing with its copy. Every Clinia background comes from the Infinity Band (see Line & shape), rendered by a component so it stays sharp at any size. Each one follows the site theme: in dark, a band keeps its colours on an Infinite ground, and a line card turns to a dark tint of its ground.
How to choose a background
| If the section is… | Use |
|---|---|
| A hero | An animated Rive scene, which carries the dot field |
| A large panel behind cards | A Brand Background band, blurred into a sweep |
| A closing call to action | A band, sharp, with its glow |
| A newsletter or sign-up strip | A band, blurred, across the strip |
| A card | A line, scaled past the card |
| Any other section | The white page. To set one apart without a band, use Remedy, the warm cream (bg-muted) |
Hero
The hero's background usually uses a scene, mostly reserved for the home page: the dot field and the line work move as part of the Rive file, so there is no separate background to place. See Rive scenes for the files and the contract.
Band background
The shape language as a background: the brand's twist or ring vector, scaled past its container, cropped by it and softened. blur sets the look, from a sharp band with its glow to a soft sweep. Any copy on top of it goes on the flat part of the ground.
pnpm dlx shadcn@latest add @clinia/brand-backgroundLarge panel, blurred sweep
import { BandBackground } from "@/components/ui/brand-background";
<BandBackground
band="twist"
ground="remedy"
blur={48}
x={35}
y={-70}
scale={80}
rotate={60}
className="rounded-lg"
>
{/* eyebrow, headline and cards */}
</BandBackground>Closing call to action, sharp band with its glow
<BandBackground
band="twist"
ground="remedy"
glow
blur={0}
x={48}
y={-30}
scale={62}
rotate={-20}
className="rounded-lg"
>
{/* headline and CTA on the left */}
</BandBackground>Newsletter strip, blurred band
<BandBackground
band="twist"
ground="remedy"
blur={20}
x={30}
y={-120}
scale={55}
rotate={90}
className="rounded-lg"
>
{/* headline and body on the left, the email field on the right */}
</BandBackground>Line background
The line language as a card background: one line shape scaled well past the card and cropped by it, with its crossing in the open area under the text. The line keeps its width at any scale. Any copy on top of it goes in the upper part of the card, clear of the line.
Remedy-dark ground
A Noble line at 160% of the card, cropped below its crossing.
Aura ground
A Purple-5 line at 220%, so the card frames only the crossing.
Vital accent
Vital works as a line on a light ground, never as a fill.
import { LineBackground } from "@/components/ui/brand-background";
<LineBackground
line={10}
ground="remedy-dark"
color="noble"
x={-3}
y={49}
scale={160}
className="rounded-lg p-5"
>
{/* title and body */}
</LineBackground>
<LineBackground
line={2}
ground="aura"
color="purple-5"
x={-100}
y={36}
scale={220}
className="rounded-lg p-5"
>
{/* title and body */}
</LineBackground>
<LineBackground
line={8}
ground="remedy"
color="vital"
x={-54}
y={38}
scale={150}
className="rounded-lg p-5"
>
{/* title and body */}
</LineBackground>Wide, short banner card
On a card much wider than it is tall, such as a help banner, the line is sized from the card's width and cropped by it, so it stays as large as on a regular card instead of shrinking to the card's height.
Still need help?
Write to the support team, or search the guides.
The section examples are clinia.com sections rebuilt at their real desktop size, then scaled down as a whole, so every proportion stays true.
The dark line-card grounds ( for Remedy, for Remedy-dark, for Aura) and their line colours come from clinia.com's dark theme. They are approved for backgrounds only: they are not brand swatches, so don't use them anywhere else.
Example
Health data, turned into a patient story
Health data, turned into a patient story
Do and Don't
Do
- Crop the band or the line on at least two sides. A whole band behind copy competes with it.
- Use one band per section. Cards and panels below a hero can carry their own.
- Pick the ground from the brand surfaces. The component sets the copy colour to match: Infinite on light grounds, Serene on Infinite.
Don't
- Stretch, recolour, tile or flip the art.
- Stack a background behind every section. It loses its effect after the first.
- Set a background image file. Use the component, so the band stays sharp at any size.