# hy-hero

<!-- Auto Generated Below -->

## Properties

| Property       | Attribute       | Description | Type                                                                        | Default                 |
| -------------- | --------------- | ----------- | --------------------------------------------------------------------------- | ----------------------- |
| `colorVariant` | `color-variant` |             | `HeroColorVariant.black \| HeroColorVariant.blue \| HeroColorVariant.white` | `HeroColorVariant.blue` |
| `description`  | `description`   |             | `string`                                                                    | `undefined`             |
| `headerstyle`  | `headerstyle`   |             | `string`                                                                    | `'common'`              |
| `heading`      | `heading`       |             | `string`                                                                    | `undefined`             |
| `image`        | `image`         |             | `string`                                                                    | `undefined`             |
| `isExternal`   | `is-external`   |             | `boolean`                                                                   | `false`                 |
| `scLabel`      | `sc-label`      |             | `string`                                                                    | `undefined`             |
| `url`          | `url`           |             | `string`                                                                    | `undefined`             |
| `urlTitle`     | `url-title`     |             | `string`                                                                    | `undefined`             |

## Dependencies

### Depends on

- [hy-heading](../heading)
- [hy-cta-button](../cta-button)
- [hy-box](../hy-box)

### Graph

```mermaid
graph TD;
  hy-hero --> hy-heading
  hy-hero --> hy-cta-button
  hy-hero --> hy-box
  hy-heading --> hy-box
  hy-cta-button --> hy-icon
  style hy-hero fill:#f9f,stroke:#333,stroke-width:4px
```

---

Helsinki University Design System