Hero

The hero opens the page under a transparent header. Each slide is a block; with more than one slide the hero becomes a slider with a counter, previous and next buttons, and a pause button when slides change on their own.

Section settings

• Height: Small, Medium or Large.
• Change slides automatically, and Change every (3–12 seconds). Slides start changing once the visitor first scrolls, taps, types or moves the pointer, so the page stays still while it loads. Visitors can always pause, and slides never move for visitors who ask for reduced motion.
• Slide dots and arrows position: Left, Center or Right along the foot of the hero.
• Height on phones: Same as the image, or full screen.

Each slide

• Images: One image, or Two images side by side (the second shows beside the first on large screens). Either image can come from a collection instead of an upload.
• Phone image: an optional second picture for phones, such as a portrait crop, shown instead of the main image on small screens. On its own, with no main image, it shows on every screen.
• Video: an optional video that plays silently on a loop over the image, with a pause button. The image shows first and stays for visitors who ask for reduced motion. Keep it short and small (under 10 MB).
• Content: Small text above heading, the Heading (Medium or Large), Text, and up to two buttons. A button's link only appears once it has a label.
• Placement: Content position picks one of nine spots on computers (Top left to Bottom right); Content position on phones picks Top, Middle or Bottom on phones. Text alignment sets left, centered or right-aligned lines.
• Text color: Light over darker photos, Dark over light ones. Image overlay (0–80%) darkens the photo behind light text so it stays readable.