lyne-components icon indicating copy to clipboard operation
lyne-components copied to clipboard

story(lead-container): initial implementation (previously Head-Component)

Open kyubisation opened this issue 9 months ago • 0 comments

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. a sbb-image, img or picture 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>

kyubisation avatar May 17 '24 14:05 kyubisation