Section reference › Content

Marquee `"type": "marquee"`

A band of large words that scrolls sideways in a loop. Use it between sections to repeat your services, values or event name.

Example#

Paste this into the sections list of a page file:

JSON

{
  "type": "marquee",
  "tone": "primary",
  "words": [
    "Brand strategy",
    "Web design",
    "Photography",
    "Motion",
    "Packaging"
  ],
  "separator": "star-fill",
  "speed": 35
}

Options#

Option	Type	Default	Description
`words`	array of strings	—	The words or short phrases that scroll by. They repeat endlessly.
`speed`	number	`30`	Seconds for one full loop. A bigger number scrolls slower.
`outline`	boolean	`false`	Show the words as outlined (hollow) text instead of solid text. Values: `true \| false`
`separator`	string	`asterisk`	Bootstrap Icons name drawn between the words, without "bi-" (e.g. "star-fill", "dot").
`padding`	string	`sm`	Common option; this section defaults it to "sm" instead of "md". Values: `none \| sm \| md \| lg`

Also accepts the options every section accepts: id, tone, padding, fluid, class, hidden.

Tips#

Use 4 to 8 short words or phrases. Very long phrases make the band feel slow.
Looks best on a coloured band: set "tone": "primary" or "dark".
The scrolling pauses when the visitor hovers over it.
The "fluid" common option has no effect here: the band is always full width.

Editing it in the HTML files#

In the built HTML the words appear twice inside .marquee-track (the second copy makes the loop seamless) and once more in a hidden span.visually-hidden for screen readers. Change all three copies. The speed is the --speed value in the style attribute of .marquee.

Where it's used#

Open these pages in template/ to see it working:

Creative Agency: template/creative-agency/culture.html (source src/demos/creative-agency/pages/culture.json)
Corporate: template/corporate/home-2.html (source src/demos/corporate/pages/home-2.json)
Finance: template/finance/home-2.html (source src/demos/finance/pages/home-2.json)
Law Firm: template/law-firm/home-2.html (source src/demos/law-firm/pages/home-2.json)
Mobile App: template/mobile-app/home-2.html (source src/demos/mobile-app/pages/home-2.json)
Tech Conference: template/conference/home-2.html (source src/demos/conference/pages/home-2.json)
Restaurant: template/restaurant/index.html (source src/demos/restaurant/pages/index.json)
Coffee Shop: template/cafe/index.html (source src/demos/cafe/pages/index.json)
Wedding: template/wedding/index.html (source src/demos/wedding/pages/index.json)
Gym & Fitness: template/gym/index.html (source src/demos/gym/pages/index.json)
Yoga Studio: template/yoga/home-2.html (source src/demos/yoga/pages/home-2.json)
Day Spa & Salon: template/spa/home-2.html (source src/demos/spa/pages/home-2.json)
Dental Clinic: template/dental/home-2.html (source src/demos/dental/pages/home-2.json)
Construction: template/construction/index.html (source src/demos/construction/pages/index.json)
Travel Agency: template/travel/home-2.html (source src/demos/travel/pages/home-2.json)
Photographer: template/photography/index.html (source src/demos/photography/pages/index.json)
Architecture Studio: template/architecture/index.html (source src/demos/architecture/pages/index.json)
Interior Design: template/interior-design/home-2.html (source src/demos/interior-design/pages/home-2.json)
Portfolio: template/portfolio/index.html (source src/demos/portfolio/pages/index.json)
Music Festival: template/music-festival/home-2.html (source src/demos/music-festival/pages/home-2.json)
Fashion Store: template/fashion-store/index.html (source src/demos/fashion-store/pages/index.json)
Charity: template/charity/home-2.html (source src/demos/charity/pages/home-2.json)
Logistics: template/logistics/home-2.html (source src/demos/logistics/pages/home-2.json)