Poster

Full-height or inline promotional panel with copy and an illustration.

Examples

Properties

Property	Attribute	Description	Type name	Type	Default
`background`	`background`	Surface tint (`default` \| `highlight`).	`DuoPosterBackground`	`"default" \| "highlight"`	`"default"`
`layout`	`layout`	`cover` (full-height, text top, image bottom-right) or `inline` (image beside text).	`DuoPosterLayout`	`"cover" \| "inline"`	`"inline"`
`imageSide`	`image-side`	Illustration edge for `layout="inline"` (`left` \| `right`).	`DuoPosterImageSide`	`"left" \| "right"`	`"left"`
`imageAlign`	`image-align`	Alignment of the illustration (`start` \| `center` \| `end`; default `center`).	`DuoPosterImageAlign`	`"start" \| "center" \| "end"`	`"center"`
`imagePadding`	`image-padding`	Padding around the illustration (`none`…`xxl`; default `none`).	`DuoSpacing`	`(typeof duoSpacingValues)[number]`	`"none"`
`minHeight`	`min-height`	Minimum block size when `layout="cover"` (default `100vh`).	`string`	`string`	`"100vh"`
`details`	`details`	On viewports ≤40rem, treat the title as a disclosure summary: copy and image stay collapsed until the title is opened.	`boolean`	`boolean`	`false`
`open`	`open`	Whether the details body is expanded. Only applies with `details` on narrow viewports.	`boolean`	`boolean`	`false`

Slots

Name	Description
`title`	Content for the title (preferably a heading element, e.g. `<h3>`).
`description`	Supporting copy (e.g. `<p>`, links).
`actions`	Optional actions (e.g. `<duo-button>` in a `<duo-stack>`).
`image`	Illustration markup (e.g. `<img>`).

Usage

Poster combines a heading, supporting copy, and an illustration on a tinted surface. Use layout="cover" for full-viewport heroes (text top, image below) or layout="inline" for compact banners with the image beside the copy.

<duo-poster layout="inline" image-side="right" background="highlight">
  <h3 slot="title">Background checks</h3>
  <p slot="description">
    Verify qualifications, reduce risk, and stay compliant with industry standards.
  </p>
  <duo-stack slot="actions" direction="horizontal" spacing="s">
    <duo-button variant="primary">Get started</duo-button>
  </duo-stack>
  <img slot="image" src="…" alt="" />
</duo-poster>

Do

Set layout="cover" with min-height="100vh" for onboarding and feature-highlight screens.
Set layout="inline" and image-side="left" or image-side="right" for in-page promo bands.
Put the heading in the title slot (e.g. <h3>), supporting copy in description, optional controls in actions, and illustrations in image.
Tune illustration placement with image-align (start · center · end).
Add space around the illustration with image-padding (none…xxl).
Set details when the poster should collapse to a title summary on small screens (≤40rem). The title is underlined, with an info icon on the right; description, actions, and image stay hidden until the title is opened.

Don’t

Don’t use poster for compact tiles — use duo-card.
Don’t use poster for alerts — use duo-banner.
Don’t rely on min-height for inline layouts; it only applies when layout="cover".

Slots

Slot	Purpose
`title`	Title markup (e.g. `<h3>`)
`description`	Supporting copy (e.g. `<p>`, links)
`actions`	Optional actions (e.g. `<duo-button>` in a `<duo-stack>`)
`image`	Illustration markup (e.g. `<img>`)

Layouts

Layout	Behavior
`inline` (default)	Horizontal row: illustration on `image-side`, copy beside it
`cover`	Full-height column: copy top, illustration below

Props

Attribute	Type	Default	Description
`layout`	`cover` · `inline`	`inline`	Panel layout.
`background`	`default` · `highlight`	`default`	Surface tint.
`image-side`	`left` · `right`	`left`	Illustration edge when `layout="inline"`.
`image-align`	`start` · `center` · `end`	`center`	Alignment of the illustration within its region.
`image-padding`	`DuoSpacing`	`none`	Padding around the illustration.
`min-height`	`string`	`100vh`	Minimum block size when `layout="cover"`.
`details`	`boolean`	`false`	On viewports ≤40rem, title acts as a disclosure summary.
`open`	`boolean`	`false`	Expanded state when `details` is set on a narrow viewport.