ComponentsLumos 0.0.1Open component
Overlay
The tint between an image and the text on top of it.
Text over a photograph is only readable by accident, until the photograph changes. Overlay is the tint that makes it readable on purpose, in two distributions.
<Img src={visual} class="cover" />
<Overlay variant="gradient" strength={70} />
<Heading tag="h3">Text over media</Heading>A gradient overlay at 70%, with the text sitting on the darkest part.
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
render | boolean | true | Set to false to skip this component and everything inside it. |
variant | "solid" | "gradient" | "solid" | solid is even across the whole area. gradient is clear at the top and darkens towards the bottom. |
strength | number (0–100) | 50 | How dark the tint is, as a percentage of the variant's full strength. |
Which to use
gradient when the text sits at the bottom of the image: it keeps the top of the picture visible. solid when text runs across the whole area, or when the image is a texture rather than a subject.