Usage

The Page Hero component is ideal for drawing attention to a specific section of a page, typically at the very top, where a bold and impactful statement is needed.

::page-hero
---
title-tag: "h2"
title-font-size: "44px"
title-line-height: "48px"
full-width: true
background-image: 
  url: "https://i.imgur.com/rU6cP5h.jpeg"
  background-size: "cover"
background-color: "#010C32"
color: "white"
padding: "100px 20px"
text-align: "left"
---
#title
Learn, code, and build with our developer community

#description
Collaborate. Innovate. Build better solutions together.

#actions
::k-button{ size="large" to="/getting-started" }
  Get Started
::
::

Props

titleTag

The HTML tag to use for the title.

• Type: string
• Default: h2

::page-hero
---
title-tag: "h1"
---
#title
Learn, code, and build with our developer community

#description
Collaborate. Innovate. Build better solutions together.
::

titleFontSize

The font size of the title text.

• Type: string
• Default: 24px

titleFontWeight

The font weight of the title text.

• Type: string
• Default: 700

titleLineHeight

The line-height of the title text.

• Type: string
• Default: 36px

descriptionFontSize

The font size of the description text.

• Type: string
• Default: 18px

descriptionFontWeight

The font weight of the description text.

• Type: string
• Default: 500

descriptionLineHeight

The line-height of the description text.

• Type: string
• Default: 28px

image

The image element placed in the PageHero.

Use the backgroundImage prop if you need a background for the entire PageHero component. Use the image prop if you need to place an image on top, bottom, left or right of the text block.

• Type: Object
• Default: undefined

interface PageHeroImage {
  /** The image position, one of 'left' | 'right' | 'top' | 'bottom'. */
  position?: PageHeroImagePosition
  /** The image source. */
  src: string
  /** The image alt text. */
  alt?: string
  /** The max width of the image in pixels or percentage. */
  maxWidth?: string
  /** The border of the image. */
  border?: string
  /** The border radius of the image. */
  borderRadius?: string
  /** The paddings of the image. */
  padding?: string
  /** The margins of the image. */
  margin?: string
  /** The image alignment inside flex parent. */
  alignSelf?: string
}

Here's an example of using PageHero with image:

Learn, code, and build with our developer community

Collaborate. Innovate. Build better solutions together.

Customize Props

::page-hero
---
padding: "20px"
border: "1px solid gray"
image: 
  src: "https://i.imgur.com/rU6cP5h.jpeg"
  alt: "The alt image text"
  max-width: "200px"
  border: "1px solid gray"
  border-radius: "8px"
  padding: "6px"
  margin: "8px"
  align-self: "center"
  position: "top"
---
#title
Learn, code, and build with our developer community

#description
Collaborate. Innovate. Build better solutions together.
::

PageHero Component Props

image

Adds image to the hero. Accepts PageHeroImage object.

position

top

bottom

left

right

The image position, one of 'left' | 'right' | 'top' | 'bottom'.

src

The image source.

alt

The image alt text.

max-width

The max width of the image in pixels or percentage.

border

The border of the image.

border-radius

The border radius of the image.

padding

The paddings of the image.

margin

The margins of the image.

align-self

The image alignment inside flex parent.

Shared Props

This component also includes the shared props listed below:

• textAlign - default is left.
• verticalAlign - default is center.
• horizontalAlign - default is center.
• border - default is null.
• borderRadius - default is null.
• backgroundColor - default is ''.
• color - default is ''.
• fullWidth - default is false.
• maxWidth - default is 100%.
• margin - default is 0.
• padding - default is 0.
• backgroundImage - default is undefined.
• styles - default is ''.

See here for more information on shared props.

Slots

actions

Use the #actions slot to add content at the bottom of the Page Hero component.

::page-hero
#actions
:::k-button{ size="large" to="/getting-started" }
Get Started
:::
::

description

Use the #description slot to add description content to the Page Hero component.

::page-hero
#description
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
::

tagline

Use the #tagline slot to add content above the title of the Page Hero component.

::page-hero
#tagline
This is a badge
::

title

Use the #title slot to add title content to the Page Hero component.

::page-hero
#title
Learn, [code](/){style="color: blue;"}, and build with our developer community
::