Flip-Card-Summary

Info

What does the component do?

It is part of the flip-card component.

When should the component be used?

Only within the flip-card component.

Flip-Card

Anatomy

Number	Type	Description	Optional	Info
1	Component	`sbb-flip-card-summary`	No
1a	Component	`sbb-title`	No
1b	Component	`sbb-image`	No
1c	Component	`sbb-secondary-button`	No	Open-Action
2	Component	`sbb-flip-card-details`	No
2a	Text	Slot	No
2b	Component	`sbb-link`	Yes
2c	Component	`sbb-secondary-button`	No	Close-Action

Demo

Default

Image Below

Copy HTML to clipboard.

Implementation

The sbb-flip-card-summary, when used inside a sbb-flip-card, shows its contents when the card is not flipped.
The component's slot is implicitly set to "summary".

<sbb-flip-card>
  <sbb-flip-card-summary>
    <sbb-title> Card Title </sbb-title>
    <sbb-image slot="image" image-src="..." alt="..."></sbb-image>
  </sbb-flip-card-summary>
</sbb-flip-card>

Slots

Use the unnamed slot to provide a title and the image slot to provide an image (via either sbb-image or img).

Optionally, you can add an overlapping sbb-chip-label by wrapping the sbb-image in a figure tag (see sbb-image doc).

<sbb-flip-card>
  <sbb-flip-card-summary>
    ...
    <figure class="sbb-figure" slot="image">
      <sbb-image
        image-src="https://cdn.img.sbb.ch/content/dam/internet/lyne/Bahnhof-Luzern.jpg"
        alt="Station of Lucerne from outside"
      ></sbb-image>
      <sbb-chip-label class="sbb-figure-overlap-start-start">...</sbb-chip-label>
    </figure>
  </sbb-flip-card-summary>
</sbb-flip-card>

Properties

Name	Attribute	Privacy	Type	Default	Description
`imageAlignment`	`image-alignment`	public	`SbbFlipCardImageAlignment`	`'after'`	The position where to render the image.

Slots

Name	Description
	Use the unnamed slot to provide a title for the `sbb-flip-card-summary`.
`image`	Use this slot to provide an image for the `sbb-flip-card-summary`.