Introduction

In progress

This element is designed for front page and landing pages. It can be used to briefly and prominently present an important part or section of the website, with an optional primary CTA-button link. It’s an ideal way to start a new section on a page with additional /liftups placed under it.

It can also include a large image (which can be either on the right or left side). Text chapter with image can be placed on a colored background (then the image is always on the right side)

# Examples

<hy-introduction
  variant="blue"
  text-title="This is an introduction"
  text-description="Highly cited researchers at the University of Helsinki, Centres of Excellence selected by the Academy of Finland and projects funded by the European Research Council."
  url="https://www.google.com"
  url-title="Check this link"
  sc-label="label for link"
  image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/kukkataedit_ja_-sedaet-6_0.jpg"
></hy-introduction>

# Properties

Property Attribute Description Type Default
imageUrl image-url string undefined
isExternal is-external boolean false
reversed reversed boolean false
scLabel sc-label string undefined
sourceSet source-set ImageSrcSet[] \| string undefined
textDescription text-description string null
textTitle text-title string undefined
url url string undefined
urlTitle url-title string undefined
useSlot use-slot boolean false
variant variant "black" \| "blue" null

# Dependencies

# Depends on

# Graph

graph TD;
  hy-introduction --> hy-main-content-wrapper
  hy-introduction --> hy-icon
  hy-introduction --> hy-image
  hy-introduction --> hy-box
  style hy-introduction fill:#f9f,stroke:#333,stroke-width:4px

Helsinki University Design System

← Key figure group →