Anteprima.

Was macht die Komponente?

Der Teaser-Product bewirbt ein Produkt mit Text und optionaler Fussnote auf einem Bild. Auf kleinen Bildschirmen folgt der Inhalt dem Bild. Es gibt zwei Varianten:

• Teaser-Product: Die ganze Fläche ist klickbar und führt zu einem Ziel.
• Teaser-Product-Static: Die Fläche ist nicht klickbar. Nur die darin enthaltenen Elemente, zum Beispiel Buttons oder Links, sind interaktiv.

Wann soll die Komponente eingesetzt werden?

• Um ein Produkt oder eine Dienstleistung mit Bild hervorzuheben und zur Produktseite zu führen.
• Wenn der Text länger sein darf als beim einfachen Teaser, z.B. mit Titel und Fussnote.
• Der Teaser-Product-Static eignet sich, wenn nicht die ganze Fläche klickbar sein soll oder es mehr als eine Aktion gibt.

Componenti simili.

Regeln.

• Verwende eine prägnante Überschrift und eine kurze Beschreibung.
• Der Teaser-Product ist als Ganzes interaktiv. Um das visuell zu unterstützen, kann ein statischer Button (nicht interaktiv) hinzugefügt werden.
• Bei mehr als einer Aktion verwende den Teaser-Product-Static.
• Setze beim Teaser-Product ein accessibilityLabel, das den Link für Screenreader beschreibt.
• Verwende nicht zu viele verschiedene Teaser-Arten und -Grössen auf einer Seite.

Specifica.

Web Components.

Il web component si trova nel pacchetto @sbb-esta/lyne-elements.

Documentazione.

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.

Questo componente è disponibile anche per Angular nel pacchetto @sbb-esta/lyne-angular.

class: SbbTeaserProductElement, sbb-teaser-product.

Properties.

CSS Properties.

Slots.

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

Properties.

CSS Properties.

Slots.