Modification – Conversational UI copy sizes on mobile

[michelleallendavey]

Hi all, the conversational copy on the PSP hero doesn't change much in size between mobile and desktop and is quite big when there's more than a few words on mobile: https://legal-and-general.github.io/canopy/?path=/story/components-hero--conversational-ui

Would like to explore if we can easily display a different font size on SM / MD / LG > XL breakpoints, or if we'd need to revisit the font-sizes generally?

[elenagarrone]

@michelleallendavey from a development point of view we could change the style for the lg-hero-card-title (the big text) to change on different breakpoints 👍
I guess the only thing to consider is having to change also the other components that might be displayed together with the lg-hero-card-title e.g. https://legal-and-general.github.io/canopy/?path=/story/components-hero--product-details so that everything is resizing appropriately.

[alexcanning]

No, they were just concepts - feel free to pick it up!

[michelleallendavey]

I reviewed this with a couple of the other creative designers yesterday – with the conversational PSP hero type style being linked to the product hero title, there's not really a happy medium where the conversational UI is small enough while the product hero title is big enough... (it starts to become similar to, or smaller than, the big data point on the product hero.)

We wondered about the feasibility of two options:

1. (Preferred option) Splitting out the conversational copy so that "Good morning, [name]" or equivalent uses lg-hero-card-title, and then any further copy ("your life and home are covered" "your investments are worth X") are in a smaller text size – would affect all products, so not a small piece of work I assume?
2. Unlinking the conversational copy on the PSP from lg-hero-card-title and creating a different style for that one, so that we can make it smaller independently of the product hero title.

[michelleallendavey]

@owensgit @elenagarrone @aaronBery Hello! Would appreciate thoughts on the suggestions above if you get a sec, please.

[elenagarrone]

Really sorry @michelleallendavey - for some reason I don't get notifications when someone replies to discussions 😞 - am I the only one or is this a bug with the discussions? 🤔

I guess we could update the lg-hero-card-title so that it takes an input of size="sm | lg" (or similar) which sets the font size. The default value could be set to be the largest one so that existing projects wouldn't have a breaking change.

So the structure could look like:

<lg-hero-card>
  <lg-hero-card-header>
    <lg-hero-card-title headingLevel="2">
      Good morning, Ben.
   </lg-hero-card-title>
    <lg-hero-card-title headingLevel="2" size="sm">
      We've got your retirement covered.
   </lg-hero-card-title>

I think it's fine to have two of the same heading levels close to each other but might be worth checking with DIG.

[michelleallendavey]

I think that makes a lot of sense – thanks @elenagarrone!

[st3fun1]

There is even a bigger issue when all the letters are capitalised:

Using lg-font-size-5 helps: