Get help Color blind mode Low vision mode

Teaser Review

Teasers are used to attract interest towards linked content with an image or icon, heading, and description.

Typically Teasers are used to promote news articles or other releated content. A Teaser may have a single destination (set with the `url` attribute) and the whole are of the component is clickable, or it may have one or more links in the link slot. When multiple Teasers are presented next to each other, it is recommended to use Duet Grid with grid-template="teaser".

Examples #

Open in new window 
<duet-grid grid-template="large">
  <duet-spacer></duet-spacer>
  <duet-grid grid-template="teaser">

    <duet-teaser
      heading="Teaser heading"
      image="https://www.duetds.com/assets/img/example-banner1.jpg"
      description="Teaser content lorem ipsum dolor sit amet consectetuer adipiscing elit lorem ipsum dolor sit amet consectetuer adipiscing elit."
    >
      <duet-button
        slot="links"
        variation="plain"
        padding="none"
        href="#"
        icon="navigation-arrow-right"
        icon-right
      >Read Lorem</duet-button>
      <duet-button
        slot="links"
        variation="plain"
        padding="none"
        href="#"
        icon="navigation-arrow-right"
        icon-right
      >Read Ipsum Sit</duet-button>
      <duet-button
        slot="links"
        variation="plain"
        padding="none"
        href="#"
        icon="navigation-arrow-right"
        icon-right
      >Read Consectetuer</duet-button>
    </duet-teaser>

    <duet-teaser
      heading="Teaser heading"
      icon="category-apartment"
      description="Teaser content lorem ipsum dolor sit amet consectetuer adipiscing elit."
    >
      <duet-link slot="links" href="#">Read more</duet-link>
    </duet-teaser>

    <duet-teaser
      heading="Teaser heading"
      description="Teaser content lorem ipsum dolor sit amet consectetuer adipiscing elit."
    >
      <duet-link slot="links" href="#">Read more</duet-link>
    </duet-teaser>

    <duet-teaser
      heading="Teaser heading"
      image="https://www.duetds.com/assets/img/example-banner1.jpg"
      description="Teaser content lorem ipsum dolor sit amet consectetuer adipiscing elit lorem ipsum dolor sit amet consectetuer adipiscing elit."
    >
      <duet-button
        slot="links"
        variation="plain"
        padding="none"
        href="#"
        icon="navigation-arrow-right"
        icon-right
      >Read Lorem</duet-button>
      <duet-button
        slot="links"
        variation="plain"
        padding="none"
        href="#"
        icon="navigation-arrow-right"
        icon-right
      >Read Ipsum Sit</duet-button>
      <duet-button
        slot="links"
        variation="plain"
        padding="none"
        href="#"
        icon="navigation-arrow-right"
        icon-right
      >Read Consectetuer</duet-button>
    </duet-teaser>
    <duet-teaser
      heading="Teaser heading"
      image="https://www.duetds.com/assets/img/example-banner1.jpg"
      description="Teaser content lorem ipsum dolor sit amet consectetuer adipiscing elit lorem ipsum dolor sit amet consectetuer adipiscing elit."
    >
      <duet-button
        slot="links"
        variation="plain"
        padding="none"
        href="#"
        icon="navigation-arrow-right"
        icon-right
      >Read Lorem</duet-button>
      <duet-button
        slot="links"
        variation="plain"
        padding="none"
        href="#"
        icon="navigation-arrow-right"
        icon-right
      >Read Ipsum Sit</duet-button>
      <duet-button
        slot="links"
        variation="plain"
        padding="none"
        href="#"
        icon="navigation-arrow-right"
        icon-right
      >Read Consectetuer</duet-button>
    </duet-teaser>
  </duet-grid>
</duet-grid>
Open in new window 
<duet-grid grid-template="large">
  <duet-spacer></duet-spacer>
  <duet-grid grid-template="teaser">
    <duet-teaser
      heading="Lorem ipsum dolor sit amet, consectetur adipiscing"
      description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
      url="https://www.duetds.com"
      image="https://www.duetds.com/assets/img/example-banner2.jpg"
      meta="21.3.2023"
    ></duet-teaser>
    <duet-teaser
      heading="Teaser heading with more than 60 characters gets smaller style and with so long heading it's best not to use description"
      url="https://www.duetds.com"
      image="https://www.duetds.com/assets/img/example-banner1.jpg"
      meta="21.3.2023"
    ></duet-teaser>
    <duet-teaser
      heading="&quot;Tää on ihan parasta!&quot; totesivat koululaiset metsätapahtumassa, jonka avasi tapahtuman suojelija, ministeri Adlercreutz"
      description="Suomen Metsäyhdistys ja 4H-järjestö kutsuvat tänä lukuvuonna 24 000 kuudesluokkalaista metsään oppimaan. Kaikki kuutoset metsään -toimintaa järjestetään ympäri Suomen, ja sen mahdollistavat Suomen Metsäsäätiö ja LähiTapiola."
      url="https://www.duetds.com"
      image="https://www.lahitapiola.fi/assets/images/5715qeqodztv/4yuy6VqJwc3lOdzMOQ0X6V/1bcdb08ad840d34e7cb075b612019fa2/661a572e-b3f1-46b2-91f0-9f8f591cfdf8.jpg?w=2100&h=1402&q=55&fm=webp"
      meta="Ympäristö • 3.9.2026"
    ></duet-teaser>
  </duet-grid>
</duet-grid>

Properties #

Property Attribute Description Type Default
description description Description text shown below the heading. string undefined
heading heading The heading text. string undefined
headingLevel heading-level The actual heading level used in the HTML markup. "h1" | "h2" | "h3" | "h4" | "h5" | "h6" "h3"
headingVisualLevel heading-visual-level Controls the visual size of the heading. Headings longer than 60 characters always use "h5" visually, regardless of this setting. "h3" | "h5" "h3"
icon icon Icon to display when no image is set. Not used if the image property is given. string undefined
iconBackground icon-background Background color for the icon string "color-background-accent-secondary"
iconColor icon-color Color for the icon string "color-foreground-accent-secondary"
image image Image URL. If provided, the icon property is ignored. string undefined
imageAlt image-alt Alt attribute text for the image. If not provided, image is assigned presentation role. string undefined
imagePriority image-priority Make the image load with higher or lower priority. Value "high" sets the img's attributes fetchpriority and loading to "high" and "eager", while value "low" sets those attributes to "low" and "lazy" "high" | "low" undefined
meta meta Meta text (date, category, etc.). Placed after the heading in source order, but rendered visually above it. string undefined
sources sources Array of sources for responsive images. Sources have the properties of element. DuetSource[] | string undefined
theme theme Theme. "" | "default" | "turva" ""
url url A destination to link to, rendered in the href attribute of a link. Makes the whole teaser act as a link and disables the links slot. string undefined

Methods #

setFocus(options?: FocusOptions) => Promise<void> #

Sets focus on underlying a element.
Available only when url attribute is used.
Use this method instead of the native focus().

Parameters #

Name Type Description
options FocusOptions

Returns #

Type: Promise<void>

Slots #

Slot Description
"links" Slot for links or buttons related to the teaser. Only default duet-link and plain duet-button components should be used in this slot. Not rendered when the url property is set.

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

When to use #

  • When you want to draw attention to a piece of linked content with an image or icon, heading and short description.
  • Especially suitable for situations where you have multiple Teasers together, e.g. news article recommendations, presented with <duet-grid grid-template="teaser">

When not to use #

  • When you need to have longer description - the Teaser is ment for very concise and quick to scan, longer content is in the linked page
  • When the constraints of the Teaser otherwise don't fit you use case - it is intentionally quite strict. You may consider e.g. the Banner.

Accessibility #

Integration

For integration, event and theming guidelines, please see Using Components. This documentation explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.

Integration guidelines

Tutorials

Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:

Tutorials

Building Layouts

 Tutorials

Using CLI Tools

 Tutorials

Creating Custom Patterns

 Tutorials

Server Side Rendering

 Tutorials

Sharing Prototypes

 Tutorials

Usage With Markdown

Troubleshooting

If you experience any issues while using a component, please head over to the Support page for more guidelines and help.