// Generated by scripts/generate-showcase.mjs. Do not edit directly. page MarqueeDetail { layout = "showcase" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_title = ctx.url.searchParams.get("pg_title") ?? "Marquee example" state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default marquee for a modern application." state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"marquee-0-1\",\"key\":\"marquee-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#marquee-demo\",\"actionHref\":\"#marquee-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"marquee-0-2\",\"key\":\"marquee-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#marquee-demo\",\"actionHref\":\"#marquee-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]") state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" seo { title = "Marquee" description = "Continuously present responsive labels, partners, notices, or capabilities with pause and resume behavior." } view {
Base component

Marquee

Continuously present responsive labels, partners, notices, or capabilities with pause and resume behavior.

7 props1 slots2 outputsTheme readyResponsive
Interactive playground

Configure Marquee

Change any prop and inspect the server-rendered component immediately.

Live preview
Component code
page MarqueeExample {
  state items = [
  {
    "id": "marquee-0-1",
    "key": "marquee-0-1",
    "value": "primary",
    "label": "Primary workflow",
    "title": "Primary workflow",
    "description": "A clean default configuration for everyday product interfaces.",
    "text": "A configurable sample message.",
    "href": "#marquee-demo",
    "actionHref": "#marquee-demo",
    "actionLabel": "View details",
    "icon": "icon-[lucide--sparkles]",
    "iconClass": "icon-[lucide--sparkles]",
    "variant": "primary",
    "status": "Active",
    "time": "09:30",
    "current": true,
    "selected": true,
    "checked": true,
    "disabled": false,
    "outgoing": false,
    "open": true,
    "number": 1,
    "count": 16,
    "percentage": 72,
    "color": "#7c3aed",
    "target": "_self",
    "ariaLabel": "Open primary workflow 1",
    "items": [
      {
        "label": "Nested option A",
        "value": "nested-a"
      },
      {
        "label": "Nested option B",
        "value": "nested-b"
      }
    ],
    "links": [
      {
        "label": "Documentation",
        "href": "#documentation"
      },
      {
        "label": "API reference",
        "href": "#api-reference"
      }
    ],
    "values": [
      "Included",
      "Standard"
    ]
  },
  {
    "id": "marquee-0-2",
    "key": "marquee-0-2",
    "value": "secondary",
    "label": "Additional option",
    "title": "Supporting example",
    "description": "A clean default configuration for everyday product interfaces.",
    "text": "Another configurable message.",
    "href": "#marquee-demo",
    "actionHref": "#marquee-demo",
    "actionLabel": "View details",
    "icon": "icon-[lucide--sparkles]",
    "iconClass": "icon-[lucide--sparkles]",
    "variant": "primary",
    "status": "Active",
    "time": "09:30",
    "current": false,
    "selected": false,
    "checked": false,
    "disabled": false,
    "outgoing": true,
    "open": true,
    "number": 2,
    "count": 32,
    "percentage": 72,
    "color": "#7c3aed",
    "target": "_self",
    "ariaLabel": "Open primary workflow 2",
    "items": [
      {
        "label": "Nested option A",
        "value": "nested-a"
      },
      {
        "label": "Nested option B",
        "value": "nested-b"
      }
    ],
    "links": [
      {
        "label": "Documentation",
        "href": "#documentation"
      },
      {
        "label": "API reference",
        "href": "#api-reference"
      }
    ],
    "values": [
      "Included",
      "Standard"
    ]
  }
]
  view {
    <Marquee
      title="Marquee example"
      description="A polished default marquee for a modern application."
      items="{items}"
    />
  }
}
Event outputInteract with the preview to inspect the typed payload.
Component props7 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Partner and capability strip

Continuously present short labels, partners, channels, or capabilities.

01
Live preview
Component usage.wrn
page MarqueeExample {
  state items = [
  {
    "label": "SSR"
  },
  {
    "label": "CSR"
  },
  {
    "label": "Themes"
  },
  {
    "label": "Accessibility"
  },
  {
    "label": "Responsive UI"
  }
]
  view {
    <Marquee
      title="Supported capabilities"
      description="A polished default marquee for a modern application."
      items="{items}"
    />
  }
}
Compact

Compact announcement ticker

Use a dense ticker for short operational updates.

02
Live preview
Component usage.wrn
page MarqueeExample {
  state items = [
  {
    "label": "All services operational"
  },
  {
    "label": "New components published"
  },
  {
    "label": "Documentation updated"
  }
]
  view {
    <Marquee
      size="sm"
      title="Compact Marquee"
      description="A compact configuration for dashboards and dense product surfaces."
      items="{items}"
      variant="soft"
    />
  }
}
Advanced

Large visual marquee

Use stronger spacing and richer items on marketing pages.

03
Live preview
Component usage.wrn
page MarqueeExample {
  state items = [
  {
    "label": "Public portals",
    "icon": "icon-[lucide--landmark]"
  },
  {
    "label": "Enterprise systems",
    "icon": "icon-[lucide--building-2]"
  },
  {
    "label": "Developer tools",
    "icon": "icon-[lucide--code-2]"
  }
]
  view {
    <Marquee
      size="lg"
      color="info"
      title="Built for complete digital platforms"
      description="A richer configuration demonstrating additional content and hierarchy."
      items="{items}"
      variant="raised"
    />
  }
}
Component outputs

Receive every typed component output

Use declarative output handlers in .wrn files or register a direct output handler from JavaScript. The canonical API exposes payload and does not require event.detail.

@pauseFires when the component emits the pause event.
@resumeFires when the component emits the resume event.
Declarative handlers.wrn
<Marquee
  @pause='console.log(payload)'
  @resume='console.log(payload)'
/>
Direct output handlers.js
import { registerOutputHandler } from "@wrnexus/csr/outputs"

const component = document.querySelector("[data-ui-component=\"Marquee\"], [data-component=\"Marquee\"]")

if (component) registerOutputHandler(component, "pause", (payload) => {
  console.log("pause", payload)
})

if (component) registerOutputHandler(component, "resume", (payload) => {
  console.log("resume", payload)
})
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Marquee"No
descriptionstring""No
itemsunknown[][]No
variantstring"default"No
classstring""No
} }