Header component

[sandrely2611-zz]

Description

Based on the Ctrl project needs, we detect some inconsistencies in the HEADER component.
Our goal with this ticket is to fix how this component looks, remove the unnecessary code from Ctrl.
And be able to consume the component from the DS without adding extra css or js to make it work in Ctrl.

Narrative

Design System: https://www.figma.com/file/c1SBfQGUU3twlW3YjeL8Sx/michelada_DS?node-id=0%3A1
Control project: https://www.figma.com/file/TmTjBO1Ua93cm6B978ErDw/ControlMocks_21-0ct-2020?node-id=3456%3A0

Video explanation
https://michelada.slack.com/archives/C0279KDU485/p1643668410442789?thread_ts=1643666990.610879&cid=C0279KDU485

Related issues from Gitlab Ctrl project

https://git.michelada.io/products/ctrl/-/issues/339

Definition of done

1. Code review approved
2. Remove CSS/JS/HTML code related to the component from Ctrl
3. Deployed to production
4. Deployed to NPM library

Acceptance criteria

1. Support two variants of header component:
   • Title and description
   • Title and description with element to the right.
2. Support mobile, tablet and desktop breakpoints.
3. In mobile and tablet versions the behavior is the same.
   • full-width

[sandrely2611-zz]

Issue # 1 en Control

Misalignment on desktop xl resolutions

Current behavior

1. The header is missaligned with the page's content due to an extra padding on desktop xl resolution.

Expected result

1. The header is aligned with the page's content on desktop xl resolution.