Key highlight group

In progress

Key highlights are 3-4 points from the content that the creator wants to hightlight. They feature big bold graphical text, so they should be used sparingly. They can be accompanied with a short description, which is opt-in but must be featured in all elements

# Examples

<hy-key-highlight-group
  variant="small"
  data-items='[{"heading":"Key Highlight title","description":"Key Highlight description text"},
    {"heading":"Key Highlight title","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris elit orci, ultricies id fermentum vel, porta et eros."},
    {"heading":"Tervetuloa Helsingin yliopistoon! Lue miten pääset syksyllä aloittamaan opintosi sujuvasti. Tutustu myös opiskelijan ohjeisiin.","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris elit orci, ultricies id fermentum vel, porta et eros."},
    {"heading":"Key Highlight title","description":"Key Highlight description text"}]'
>
</hy-key-highlight-group>

<hy-key-highlight-group
  variant="big"
  data-items='[{"heading":"Key Highlight title","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris elit orci, ultricies id fermentum vel, porta et eros."},
    {"heading":"Onnea uudet opiskelijat","description":"Key Highlight description text"},
    {"heading":"Key Highlight title","description":"Key Highlight description text"}]'
>
</hy-key-highlight-group>

<hy-key-highlight-group
  variant="small"
  data-items='[{"heading":"Key Highlight title","description":"Key Highlight description text"},
    {"heading":"Key Highlight title","description":"Key Highlight description text"},
    {"heading":"Key Highlight title","description":"Kaikista maistereista työllistyi omalle alalleen vuoden sisällä valmistumisesta"}]'
>
</hy-key-highlight-group>

# Properties

Property Attribute Description Type Default
dataItems data-items data KeyHighlightValue[] \| string undefined
variant variant big or small KeyHighlightVariants.default \| KeyHighlightVariants.small KeyHighlightVariants.default

# Dependencies

# Depends on

← Lift ups →