visual-framework
Design smaller variant of Vf-blockquote
The last blockquote design update focused on the use case for Articles in which an external quote needs emphasis in a sea of texts. Recent discussions with the comms team has shown that a smaller variant is needed for cases like microsites where emphasis is not required on the quote.
Examples https://wwwdev.ebi.ac.uk/about/our-impact/biodiversity-and-climate-change/ https://www.ebi.ac.uk/research/research-group-leaders-at-embl-ebi https://www.ebi.ac.uk/about/jobs/tech-careers - This uses cards https://www.ebi.ac.uk/about/public-engagement
Consider use case where a blockquote is used close to a section header of 24 px or 21px the current blockquote font size of 28px would overwhelm the section header.
Task
- Design a smaller variant of the vf-blockquote in figma.
Useful links
We discussed the proposed solution with the team on Wednesday 7th August and agreed to use the small blockquote variant with a font size of 21px as this variant provides a font size which is smaller that the commonly used section headers while also being larger than the default body paragraph font.
Useful links
- Vf-blockquote - Proposed design for the smaller variant - Slides
Next steps
- Create responsive variant
- Add design in figma library
- Develop the small variant and responsive blockquote variants
The responsive variant of the vf-blockquote has been designed as discussed. Here’s the link to the design in figma.
Highlights of the responsive design
- Blockquote design and layout is more compact on mobile placing prominence on the quotation
- Text aligned to the right for good readability
- Related components of the attribution are grouped together. This also reads better for screen readers.
- Small avatar variant (64px by 64px) used on mobile for the both large and small variants of the blockquote
- Recommended breaking point of 768px
Useful links
Next steps
- Add the responsive design & Small blockquote to the visual framework library in figma
- Development of the responsive design & Small blockquote
- Update the vf-blockquote documentation by:
- Removing the texts saying “This component is not optimised for mobile devices.”
- Adding notes on when to use the small variant of the blockquote as documented in the slides
The responsive and small vf-blockquote has been added to the visual framework library in figma. @stefangutnick kindly review the published updates.
@Adedoyinebi Looks very well thought out, I don't have any comments. Great work!
Thank you for reviewing this @stefangutnick
@bhushan-ebi A follow up task has been created for the development of the enhancements #2114. Closing this task.