Adding multiline examples in places only one line is usually in effect in the demos.

[acsr]

**TL;DR;

The page with typography examples at https://demo.plone.org/content-types/typography does not contain multiline example content for e.g. unordered list items (and maybe: ordered list items).

This ticket is aiming at improving the example content used in https://demo.plone.org for all 3 tastes of Plone

I opened a ticket for the VLT demo content as well:

The fix of the CSS for the example below should then happen in VLT, where I opened already a ticket. kitconcept/volto-light-theme#515

Example:

There is e.g. a bug in Volto Light Theme CSS with Safari (relevant because used in demo.plone.org) due to a styling working in other browsers but not in Safari both on macOS and iOS/iPadOS

The line height of the first line is changed to adjust the list-item marker at the front by adjusting the line height. This works at first sight in Chrome and Firefox.

In Safari the line height is visually only changed for the first line because the style is bound to the list-item -> li:marker.

Suggested examples

Adding more examples of multiline content for relevant text, currently only consisting of one line in the examples:

• headlines
• bylines
• kicker lines
• image description, captions

Goal: Make flaws obvious at early state and fix them early! Example content I crucial for that.

I made some efforts over the years to make these exampls accessible again: e.g. the test rendering pages for Classic UI.

How and where to place without overloading a page – Adding a "extreme content" page

• Showcasing important advanced corner cases underlines the competence of a CMS (Theme)
• The VLT combination pages show the way to go

Relevant places

• VLT theme (see: related Adding multiline example demo content in places only one line is usally in effect in the demos. kitconcept/volto-light-theme#721)
• https://light-theme.kitconcept.io
• https://demo.plone.org

Other Showcases

• Volto Storybook -> https://6.docs.plone.org/volto/contributing/documentation.html#volto-documentation-storybook-label
  • ?? https://6.docs.plone.org/storybook/?path=/story/view-widgets-richtext--rich-text (no li examples found)
• https://volto.demo.plone.org (currently no demo content)
• https://classic.demo.plone.org (currently no demo content)
• https://classic.demo.plone.org/@@test_rendering
• https://classic.demo.plone.org/@@test-rendering-cheatsheet
• https://classic.demo.plone.org/@@test-rendering-icons (contains issues)

other Test locations
https://classic.demo.plone.org/[someimage.jpg]/@@images-test

Drawback if not fixing this in all places

• Failing or hiding to fail, shifts the pitfall, but does not solve the challenge to impress.

Objection handling

• Of course you need to customize the design. But an exposed demo site is the business-entry-card.

[stevepiercy]

@acsr I see ordered and unordered lists on https://demo.plone.org/content-types/typography. Can you provide screenshots?

[davisagli]

@stevepiercy He's pointing out that the existing list item examples don't have text long enough to flow to a second line, so don't demonstrate the line spacing.