Preview.

What does the component do?

The teaser product promotes a product with text and an optional footnote on an image. On small screens, the content follows the image. There are two variants:

• Teaser product: The whole area is clickable and leads to a target.
• Teaser product static: The area is not clickable. Only the elements it contains, for example buttons or links, are interactive.

When should the component be used?

• To highlight a product or service with an image and lead to the product page.
• When the text may be longer than in the simple teaser, e.g. with a title and footnote.
• The teaser product static suits cases where the whole area should not be clickable or where there is more than one action.

Similar components.

Rules.

• Use a concise heading and a short description.
• The teaser product is interactive as a whole. To support this visually, a static button (not interactive) can be added.
• With more than one action, use the teaser product static.
• On the teaser product, set an accessibilityLabel that describes the link for screen readers.
• Do not use too many different teaser types and sizes on one page.

Specification.

Web Components.

The web component is in the package @sbb-esta/lyne-elements.

Documentation.

The <sbb-teaser-product> is a component that can display a text and a footnote, combined with an image as background, to tease a product.
The whole component behaves like a link, and it is clickable; on small screens, the content follows the image.

The component can have at most a single interactive element in its static version (e.g. <sbb-button-static>).
If it has to include more than one interactive element, use the <sbb-teaser-product-static> element instead.

<sbb-teaser-product href="...">
  <sbb-image slot="image" image-src="..."></sbb-image>

  <p class="sbb-teaser-product--spacing">Content ...</p>

  <p slot="footnote" class="sbb-teaser-product--spacing">...</p>
</sbb-teaser-product>

Slots.

Use the image slot to pass an <sbb-image> or an img that will be used as background.
Optionally, you can add an overlapping <sbb-chip-label> by wrapping the <sbb-image> in a figure tag (see sbb-image doc).

Use the optional footnote slot to add a text anchored to the bottom-end of the component.

The default slot is reserved for the main content: it could be a simple text or a text combined with more elements,
like the <sbb-title> or an interactive element, like a button or a link (needs to be in static variant!).

<sbb-teaser-product href="...">
  <figure slot="image" class="sbb-figure">
    <sbb-image image-src="..."></sbb-image>
    <sbb-chip-label class="sbb-figure-overlap-start-start">Chip label</sbb-chip-label>
  </figure>

  <p class="sbb-teaser-product--spacing">Content ...</p>
</sbb-teaser-product>

If paragraphs, title and/or button are used, consumers can apply the helper class sbb-teaser-product--spacing
to display the components with the correct spacings.

<sbb-teaser-product href="...">
  <sbb-image slot="image" image-src="..."></sbb-image>
  <sbb-title level="3" class="sbb-teaser-product--spacing">
    Benefit from up to 70% discount
  </sbb-title>
  <p class="sbb-teaser-product--spacing">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium felis sit amet felis
    viverra lacinia. Donec et enim mi. Aliquam erat volutpat. Proin ut odio tellus.
  </p>
  <sbb-button-static class="sbb-teaser-product--spacing" size="l">Label</sbb-button-static>
</sbb-teaser-product>

Style.

Use the image-alignment attribute to anchor the content after (on the left) or before (on the right).

<sbb-teaser-product image-alignment="before"> ... </sbb-teaser-product>

Add the negative attribute to enable the negative variant.

<sbb-teaser-product negative> ... </sbb-teaser-product>

Accessibility.

It's important to set the accessibilityLabel on the <sbb-teaser-product>, which describes the link for screen-reader users.

Static variant.

The <sbb-teaser-product-static> is a non-interactive version of the <sbb-teaser-product> component,
which can be used to tease a product without making the whole component interactive.
It should be used if there is more than one interactive action.

Angular.

This component is also available for Angular in the package @sbb-esta/lyne-angular.

class: SbbTeaserProductElement, sbb-teaser-product.

Properties.

CSS Properties.

Slots.

class: SbbTeaserProductStaticElement, sbb-teaser-product-static.

Properties.

CSS Properties.

Slots.