What does the component do?
A container groups related content, defines distances to the previous and next container and can contain a sticky footer.
When should the component be used?
- To group and structure content logically.
- To ensure consistent spacing and layout within a page or application.
- When a sticky footer is needed that stays at the bottom of the container.
Rules
- All content (apart from header and footer) must be placed in a container. This means that at least one container must be used per page.
- The spacing of the containers can be adjusted if necessary.
| Number | Type | Description | Optional | Info |
|---|---|---|---|---|
| 1 | Slot | Beliebiger Inhalt erlaubt | No | |
| 2 | Component | sbb-sticky-bar | Yes | |
| 2a | Slot | z.B. für Action-Group | No |
The sbb-container is a component that displays its content with the default page spacing. It also supports the slotting of a sbb-sticky-bar.
<sbb-container>
<!-- Any other kind of content. -->
...
<!-- Sticky bar should go last. -->
<sbb-sticky-bar> ... </sbb-sticky-bar>
</sbb-container>
Slots
The sbb-container content is provided via an unnamed slot.
The image slot can be used to place a background image. If you need to control the object position,
use CSS object-position for slotted img, or --sbb-image-object-position variable for slotted sbb-image.
If an image is present, the container receives a pre-defined padding.
It's possible to override the padding by using the CSS variable --sbb-container-padding.
Optionally, you can add an overlapping sbb-chip-label by wrapping the sbb-image in a figure tag (see sbb-image doc).
<sbb-container>
<figure class="sbb-figure" slot="image">
<sbb-image
image-src="https://cdn.img.sbb.ch/content/dam/internet/externe-assets/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-container>
Style
By default sbb-container uses the page spacing defined in the layout documentation.
Optionally the user can use the expanded property (default: false) to switch to the page spacing expanded layout.
Spacing options are applied to all the container's content, including the sbb-sticky-bar.
The component has also five color variants that can be set using the color property (default: white).
In midnight and charcoal variants, the slotted content text color and the focus outline color change to white,
but it's up to the consumer to correctly set the negative property on slotted Lyne components, if needed.
<sbb-container expanded variant="milk"> ... </sbb-container>
<sbb-container variant="midnight">
<sbb-title negative>Title</sbb-title>
<p>Text</p>
</sbb-container>
Properties
| Name | Attribute | Privacy | Type | Default | Description |
|---|---|---|---|---|---|
backgroundExpanded | background-expanded | public | boolean | false | Whether the background color is shown on full container width on large screens. |
color | color | public | 'transparent' | 'white' | 'milk' | 'midnight' | 'charcoal' | 'white' | Color of the container, like transparent, white etc. |
expanded | expanded | public | boolean | false | Whether the container is expanded. |
Slots
| Name | Description |
|---|---|
| Use the unnamed slot to add anything to the container. | |
image | The slot used to slot an sbb-image to use as background. |
sticky-bar | The slot used by the sbb-sticky-bar component. |