Use attributes on the <legion-campaigns-carousel> element to tune readability panel and text sizes.
Attributes
- panel-start (0–1, default 0.6)
- panel-mid (0–1, default 0.45)
- panel-end (0–1, default 0.25)
- panel-shadow (CSS box-shadow, default
0 8px 28px rgba(0,0,0,.45))
- title-size (CSS font-size, default
clamp(16px, 2.2vmin, 28px))
- description-size (CSS font-size, default
clamp(12px, 1.6vmin, 16px))
- title-shadow (CSS text-shadow, default
0 3px 14px rgba(0,0,0,.85))
- description-shadow (CSS text-shadow, default
0 2px 10px rgba(0,0,0,.7))
Example
<legion-campaigns-carousel
max-campaigns="5"
height="280"
base-url="https://your-domain.com"
panel-start="0.7"
panel-mid="0.5"
panel-shadow="0 10px 30px rgba(0,0,0,.5)"
title-size="clamp(18px, 2.6vmin, 32px)"
</legion-campaigns-carousel>
Notes
- These affect the small text panel overlay inside each card.
- If a card has no image, the panel still shows to keep consistency.
- If omitted, defaults provide good readability on most images.