Flip-Card – digital.sbb.ch

Flip-Card

Info

What does the component do?

Hides content (text and links) behind a title and an image. The corresponding content can be shown or hidden by clicking on the flip card.

When should the component be used?

To structure content.
To ensure/provide clarity.

Rules

Title and image are mandatory
If possible, the detailed text should not be too long, or only long enough so that the flip card does not have to be enlarged after the details are displayed.

Accordion

Flip-Card-Details

Flip-Card-Summary

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

Image After

Image Below

No Image

Long Content

Long Title

Copy HTML to clipboard.

Implementation

The sbb-flip-card component displays an informative card that reveals more informations when clicked or toggled programmatically.
It's meant to be used together with sbb-flip-card-summary and sbb-flip-card-details.

<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-details> Some additional text. </sbb-flip-card-details>
</sbb-flip-card>

Slots

The component will display the content slotted in the summary slot in the main view, and the content slotted inside the details slot after the card has been flipped.

States

The sbb-flip-card will switch to the flipped state after the user clicks on it or after the toggle method is called.

Properties

Name	Attribute	Privacy	Type	Default	Description
`accessibilityLabel`	`accessibility-label`	public	`string`	`''`	This will be forwarded as aria-label to the action in the non flipped state. If not set, the textContent of the `sbb-flip-card-summary` is taken.
`details`	-	public	`SbbFlipCardDetailsElement \| null`		Returns the slotted sbb-flip-card-details.
`isFlipped`	-	public	`boolean`		Whether the flip card is flipped.
`summary`	-	public	`SbbFlipCardSummaryElement \| null`		Returns the slotted sbb-flip-card-summary.

Methods

Name	Privacy	Description	Parameters	Return	Inherited From
`toggle`	public	Toggles the state of the sbb-flip-card.		`void`

Events

Name	Type	Description	Inherited From
`flip`	`CustomEvent<void>`	Emits when the flip card flips.

Slots

Name	Description
	Use the unnamed slot to add a `sbb-flip-card-summary` and a `sbb-flip-card-details` element.