Add panel component #1012
Add panel component #1012
Conversation
|
@davidhunter08 can you add some screenshots? |
| background: $color_nhsuk-green; | ||
| border: $nhsuk-border-width-panel solid transparent; |
There was a problem hiding this comment.
I presume this is similar to the GOV.UK panel - we should double check this looks ok with changed / forced colours.
There was a problem hiding this comment.
Yeah that's taken from GOV. I'll check what it looks like with changed / forced colours.
| border: $nhsuk-border-width-panel solid transparent; | ||
| box-sizing: border-box; | ||
| color: $color_nhsuk-white; | ||
| padding: nhsuk-spacing(6) - $nhsuk-border-width-panel; |
There was a problem hiding this comment.
add comment for why this is different?
There was a problem hiding this comment.
Which bit @edwardhorsford ?
| padding: nhsuk-spacing(6) - $nhsuk-border-width-panel; | ||
|
|
||
| @include mq($until: tablet) { | ||
| padding: nhsuk-spacing(4) - $nhsuk-border-width-panel; |
There was a problem hiding this comment.
add comment for why this is differenet?
Font sizesAfter reviewing the panel font sizes, taking into consideration the proposed type scale updates, I've change the panel body font size to 24px(20px on mobile).
|
davidhunter08
requested review from
anandamaryon1,
frankieroberto and
chrimesdev
|
@davidhunter08 Thoughts on padding? I can see this totals 40px with the border and padding. Our cards tend to have 32px padding. I wonder whether this should have the same padding amount as cards? Possibly not an issue since they shouldn't ever appear on the same page. But worth considering? Side note, any idea why the panel includes a 4px border? I assume for print/high-contrast styles? |
It makes sense and looks ok having the padding 32px.
I presumed this was for changed/forced colours, same as the buttons, but I haven't tested it. We can test in the accessibility lab. |
|
Tested on Windows with high contrast, 4px transparent border shows white 👍 |
Description
Add panel component for use on confirmation pages.
Large screens
Small screens
Checklist