Add new "grey" hero variant #3450
Conversation
…re/165/analysis-hero
Co-authored-by: rmccar <[email protected]>
Co-authored-by: rmccar <[email protected]>
|
@precious-onyenaucheya-ons it looks like there are a couple of differences to the design and what is asked for in the description of the ticket.
This is the screenshot running the component locally This is the screenshot of the design in Figma |
.../bitmaps_reference/ds-vr-test__components_hero_example-hero-analysis_0_document_1_tablet.png
Outdated
Show resolved
Hide resolved
.../bitmaps_reference/ds-vr-test__components_hero_example-hero-analysis_0_document_2_mobile.png
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
The gap between the top of the hero and the breadcrumbs is much bigger than in the figma or prototype
There was a problem hiding this comment.
The padding top is still much bigger than in the figma
There was a problem hiding this comment.
This is the last thing I have that needs addressing, I think the padding top just needs reducing when using breadcrumbs
There was a problem hiding this comment.
Worth checking the margin below the topic. It looks like the gap is smaller in the design
There was a problem hiding this comment.
I think we may have a slight issue with the description list. One of the requirements is:
description list component added horizontally and it can include text or hyperlinks - https://jira.ons.gov.uk/browse/ONSDESYS-189
I don't think we can currently have links in here.
|
Now this is called the "grey" variant the title and description should be updated |
| &--grey & { | ||
| &__details { | ||
| padding-top: 1rem; | ||
| } | ||
| } |
There was a problem hiding this comment.
This needs to be changed when breadcrumbs are used not when we use the grey variant
What is the context of this PR?
ONSDESYS-165....
Created new Hero variant as per the Figma.
Prototype link
Due to the changes in the HTML structure, I adjusted the styling by removing the margin applied to the text element when followed by a button. Instead, I added a margin to the top of the button to ensure consistent spacing.
How to review this PR
Check that new src/components/hero/example-hero-grey.njk in Hero component matches the figma design
Checklist
This needs to be completed by the person raising the PR.