lyne-components
lyne-components copied to clipboard
story(lead-container): initial implementation (previously Head-Component)
We want to implement the sbb-lead-container
component.
It's purpose is to be used at the top of a page with a lead image.
Figma: https://www.figma.com/file/9r6xSfNmEfCFxl1yFYedrj/Lyne-Components?type=design&node-id=35586-654830&mode=design&t=TyTftKcUUKiNAtkx-4
Design Spec:
- From zero to medium the image and content section (not the content itself) are both full width and the content follows the image below
- Starting from large, the content section has a specific width and is moved into the image space as depicted
- Starting from ultra, the image also has a fixed width
Tech Spec:
- It should have a slot for the image with name
image
(e.g. asbb-image
,img
orpicture
can be slotted) - It should have an unnamed slot for anything else which is placed inside the content section
- Add readme documentation for the spacings to be used inside the component (
4x
after<sbb-breadcrumb-group>
,4x
after a lead link below the<sbb-breadcrumb-group>
, no spacing before the<sbb-title>
,s
after a lead text)
<sbb-header>...</sbb-header>
<sbb-lead-container>
<sbb-image slot="image" ...></sbb-image>
<sbb-breadcrumb-group>...</sbb-breadcrumb-group>
<sbb-block-link size="xs" icon-name="chevron-small-left-medium" icon-placement="start" href="...">Label</sbb-block-link>
<sbb-title>Title</sbb-title>
<p>Text</p>
<div>Other content</div>
</sbb-lead-container>