| Page Properties | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Lists are an aggregation of many items into a logical group with a common theme.
...
Item | Type | Notes |
List name | Text | Can be used in some circumstances in aria to give context to the list. If presented, aria-labelledby would be appropriate, if a presentational heading was used, aria-label would be appropriate. |
List description | Text | TBC |
… | TBC as to whether a visible heading for the list (e.g. You might also like) forms part of the list or whether it falls within the section heading block. Not all list will necessary need to display a visible heading as it might fall under the page header (H1). | |
|
|
*Notes Additional elements which are not technicaly expected to be content items (e.g. skip links and item counts) also exist, but haven’t been added to content as it isn’t expected to be content editable per se (outside of a dictionary).
Visual Style
Lists in and of themselves don’t have a specific visual style. But within lists, there are common layout patterns.
...
Discuss grid vs flexbox and how to deliver a centred option (e.g. 3 + 2).
Behaviour
Lists themselves are often guided by the content that exists within them, so don’t specifically have a behaviour though there are some behavioural ‘extensions’ to be mindful of.
Lists are always structural, but can also be semantic. Semantic lists allow for ordered and unordered lists (and potentially definition lists).
Any individual list can be considered critical or optional. A critical list always displays its entire contents and is generally used with the list of the core content of the page (e.g. the main product list on a product listing page. An optional list can display a portion of the list, with the remained revealed through user interaction of list controls.
List controls include carousels, ‘batch loading' and pagination, which are defined separately within this section.
Filtering and sorting are also list controls that fall outside of the MVP.
...
Programmatic v Customisable: A pure approach to headless CMS removes presentation controls, instead delivering presentation programmatically. Whilst it might be possible to programmatically set decisions (e.g. lists over 20 cannot be presented in carousels), is it better to be cautious and provide guidance/recommendation instead and allow for manual implementation of decisions?
What doesn’t need list semantics?: Lists can often be overdone. Some argue that anything that looks like a list should have list semantics and in most cases that is right, but do all multi-item use cases need a list? (e.g. it is likely there is little value in a CTA Block being a semantic list).
Inspiration from elsewhere
...