Brief: Product Overview v. 0.1 [Block]
- Nick Harris
- Sergiy Nalyvayko (Unlicensed)
Component type | Block |
|---|---|
Document status | IN PROGRESS |
Design source (in Figma) | https://www.figma.com/file/0kGNJaC3xZ66WElO5TWvX3/Chameleon-System-(Phase-2)?node-id=2340%3A49536 |
Author | @Nick Harris |
Responsible |
|
Milestone | 3 |
The Product Overview Block (or product overview component - needs specifying) is a block designed to summarise a page or product. It acts as the introduction to the rest of the page (after headers)…
Usage
Do’s
Designed for single use on a page
Use when you want to summarise a page’s content.
Dont’s
Don’t use multiple instances of this component on a single page
Use a more appropriate block to deliver section content
Don’t include too much copy in your overview.
Anatomy
Item | Type | Notes |
|---|---|---|
1 | Component (Typography) | Mandatory but visibility is controlled |
2 | Component (Typography) | Mandatory |
3 | Pills | Out of scope for MVP |
See Figma for full list of variants.
Related/Similar Components
Typography
Other typography focused blocks
Key Content
Item | Type | Notes |
Headline | Text |
|
Main copy | Text |
|
Tag title | Text |
|
Tags | List | Not in MVP |
Editorial
Headline should not repeat page title or product name.
Overviews should be concise. Don’t include lots of copy, stick to the important points.
Accessibility
I can’t think of any obvious ones aside from the basics.
Headline should be called out as heading etc
Analytics & Data
N/A
Future Expansion
If tags are not implemented as part of this component then they will need to be added later.
There could be a list of “approved“ components that could be used in this Block.
Wider Conversations that may impact this
Heading Control: Can we programmatically determine headings so that the content is properly?
Content structure and format being delivered through Salsify and any impact on what we can do (in a similar way to limitations on what we get from LDS)
Examples
Useful links
n/a