# Container

Component of the SBB design system Lyne.

- Package: `@sbb-esta/lyne-elements` (Angular: `@sbb-esta/lyne-angular`)
- Structure: main element with parts; use parts only within the element they belong to
- Categories: Container
- Status: Design guidelines complete

## Links

- Page on digital.sbb.ch: https://digital.sbb.ch/en/design-system/lyne/components/container/
- Storybook: https://lyne-elements.app.sbb.ch/?path=/docs/elements-container--docs
- Angular (`@sbb-esta/lyne-angular`): https://lyne-angular.app.sbb.ch/angular/components/container/overview (API: https://lyne-angular.app.sbb.ch/angular/components/container/api)
- Figma: https://www.figma.com/design/mWknI2rC5DJmOgRO61WKai/Lyne-Components?node-id=7491-24
- GitHub: https://github.com/sbb-design-systems/lyne-components/tree/v5.12.0/src/elements/container

## Elements

- `sbb-container`: It displays its content with the default page spacing.
  - `sbb-sticky-bar`, only within `sbb-container`: A container that sticks to the bottom of the page if slotted into `sbb-container`.

## Overview

### What does the component do?
A container groups related content and gives it the page spacing. It can contain a sticky bar.

### When should the component be used?
* To group and structure content logically.
* To ensure consistent spacing and layout on a page.
* When a sticky bar is needed at the bottom of the container.

### Rules.
* All content apart from [header](https://digital.sbb.ch/en/design-system/lyne/components/header/) and [footer](https://digital.sbb.ch/en/design-system/lyne/components/footer/) is placed in a container. Each page has at least one.
* The default page spacing can be switched to the expanded spacing if necessary.
* The sticky bar is the last element in the container.
* On dark background colours, components inside the container must be set to "negative" themselves.

## Implementation (web components)

The `<sbb-container>` is a component that displays its content with the default page spacing.

```html
<sbb-container>
  <sbb-title>My Title</sbb-title>
  <p>...</p>
  ...
</sbb-container>
```

It also supports the slotting of an `<sbb-sticky-bar>`.

```html
<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](https://lyne-elements.app.sbb.ch/?path=/docs/elements-image--docs#utility-classes)).

```html
<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](https://lyne-elements.app.sbb.ch/?path=/docs/guides-layout--docs).
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.

```html
<sbb-container expanded variant="milk"> ... </sbb-container>

<sbb-container variant="midnight">
  <sbb-title negative>Title</sbb-title>
  <p>Text</p>
</sbb-container>
```

### Sticky Bar

The `<sbb-sticky-bar>` is a component meant to be slotted inside a `<sbb-container>` component.
It is displayed with sticky positioning at the bottom of the container that contains it.

```html
<sbb-container>
  <sbb-sticky-bar>
    <!-- Sticky bar content. -->
  </sbb-sticky-bar>
</sbb-container>
```

#### Animate from sticky to normal content flow and vice versa

By default, the sticky bar is set to `position: sticky`. In certain cases, the consumer needs
to control the sliding out (or sliding in) of the sticky bar.
By calling the `stick()` or `unstick()` methods, the position property is toggled
between `position: sticky` and `position: relative` by displaying a slide animation. When the sticky bar is `unstick`,
the `<sbb-sticky-bar>` will behave like a normal container without any sticky behavior.
Whenever the sticky bar is currently not sticky (e.g. scrolled down),
calling `stick()` or `unstick()` won't have any visual effect.

An example use case is to call `unstick()`, which visually slides out the sticky bar, and
then the consumer can remove it from the DOM by listening to the `unstick` event.

#### Style

The `<sbb-sticky-bar>` inherits its variant from the `<sbb-container>` it's placed in.
Optionally the user can set the `color` property on the `<sbb-sticky-bar>` in order to override the one inherited by the `<sbb-container>`.
The color is only applied when the sticky bar is sticking, and will become transparent once it settles on the bottom of the container.

The component has two sizes, `s` and `m`, that can be set using the `size` property.

## API (web components)

Full API tables (attributes, events, slots, CSS properties): https://digital.sbb.ch/en/design-system/lyne/components/container/api.md