Marquee

The built-in marquee tag — a continuously scrolling ticker for logos, announcements, or a tagline. Usage, options, and live examples.

marquee is a scrolling ticker — content that slides continuously across the row, the way logo strips and announcement bars do. The content is repeated so the loop is seamless, it pauses while the pointer is over it (pauseOnHover), and it respects prefers-reduced-motion (the content holds still for readers who’ve asked to reduce motion).

Use it as {% marquee %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'marquee', …).

Demonstrations

The block body is the scrolling content; duration sets how long one loop takes in milliseconds (lower is faster):

direction='right' reverses the scroll and a lower duration moves it faster. The items can themselves be other built-in tags:

gap widens the space between the looping copies, and pauseOnHover=false keeps it scrolling even under the pointer:

By default the strip pauses while the pointer is over it (pauseOnHover is on) — hover any marquee above to see it hold.

With other components

A marquee makes a tidy announcement bar inside a paper surface:

Attributes

Omit any attribute to take its default.

attr={...} forwards raw HTML attributes onto the rendered element.

CSS Selectors

Each marquee carries data-aardvark-island="Marquee" on its wrapper, and Mantine exposes its parts as mantine-Marquee-* classes — target either to style it from your theme CSS.

[data-aardvark-island="Marquee"] {
  /* style every marquee on the page */
}

.mantine-Marquee-root {
  /* the root part */
}

.mantine-Marquee-group {
  /* the group part */
}

.mantine-Marquee-content {
  /* the content part */
}

Injecting Attributes

attr={…} forwards raw HTML attributes (including event handlers) straight onto the rendered element.