Page Section

Usage

The Page Section component can be used in various scenarios to improve the layout, user experience and content hierarchy. For example, each Page Section can be customized with different background colors, padding and margins to create visually appealing groupings of content.

Think of the Page Section component as a "base-level" page element. Keep in mind that you can also nest Page Section components to help achieve the desired layout.

::page-section
---
tag: "section"
full-width: true
margin: "0px"
padding: "100px 20px"
horizontal-align: "left"
text-align: "left"
color: "white"
background-color: "lightgray"
background-image:
  url: "https://i.imgur.com/rU6cP5h.jpeg"
  background-size: "cover"
  background-position: "center"
  background-origin: "border-box"
  background-repeat: "no-repeat"
  background-overlay: "rgba(0,0,0, 0.1)"
---
Collaborate. Innovate. Build better solutions together.

#title
Learn, code, and build with our developer community
::

Props

title

Customization options for the title of the Page Section, allow you to modify the title tag and styles of the rendered elements.

• Type: Object
• Default: undefined

interface PageSectionTitle {
  /** Title font size. */
  fontSize?: string
  /** Title font weight. */
  fontWeight?: string
  /** Title line height. */
  lineHeight?: string
  /** Title paddings. */
  padding?: string
  /** Title margin. */
  margin?: string
  /** Title text color. */
  color?: string
  /** Title text align. Accepts values for text-align css property. */
  textAlign?: 'left' | 'right' | 'center' | 'justify' | 'initial' | 'inherit'
  /** HTML tag to use for the title. */
  tag?: string
}

::page-section
---
title:
  tag: "h2"
  font-size: "20px"
  font-weight: 700
  line-height: "20px"
  padding: "4px 0"
  margin: "0 0 8px"
  color: "white"
  text-align: "center"
tag: "section"
full-width: true
margin: "0px"
padding: "100px 20px"
horizontal-align: "center"
text-align: "left"
color: "white"
background-color: "lightgray"
background-image:
  url: "https://i.imgur.com/rU6cP5h.jpeg"
  background-size: "cover"
  background-position: "center"
  background-origin: "border-box"
  background-repeat: "no-repeat"
  background-overlay: "rgba(0,0,0, 0.1)"
---
Collaborate. Innovate. Build better solutions together.

#title
Learn, code, and build with our developer community
::

fullWidth

Should the main element content extend full width to the edge of the viewport. Useful for creating sections that span the entire width of the page with their own background color, border, or image, etc.

• Type: boolean

::page-section
---
background-color: "lightGray"
full-width: true
title:
  text-align: "center"
text-align: "center"
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

#title
Getting started
::

fullHeight

Set the element height to 100% of the viewport height, minus the height of the global navigation header. In combination with the full-width: true prop, this is useful for creating full-screen sections that fill the entire viewport as the user scrolls.

• Type: boolean

::page-section
---
background-color: "lightGray"
full-height: true
full-width: true
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

#title
Getting started
::

Shared Props

This component also includes the shared props listed below:

• tag - default is section.
• textAlign - default is left.
• verticalAlign - default is top.
• horizontalAlign - default is ''.
• border - default is null.
• borderRadius - default is null.
• background - default is undefined.
• backgroundColor - default is ''.
• color - default is null.
• fullHeight - default is false.
• fullWidth - default is false.
• maxWidth - default is 1280px.
• padding - default is var(--kui-space-70, 20px).
• margin - default is var(--kui-space-0, 0).
• backgroundImage - default is undefined.
• styles - default is ''.

See here for more information on shared props.

Slots

default

Use the #default slot to add content to the Page Section component. You can use regular markdown in the slot as well as any components.

::page-section
---
full-width: true
padding: "100px 20px"
color: "white"
background-image:
  url: "https://i.imgur.com/rU6cP5h.jpeg"
  background-size: "cover"
  background-position: "center"
  background-origin: "border-box"
  background-repeat: "no-repeat"
  background-overlay: "rgba(0,0,0, 0.1)"
---
Collaborate. Innovate. Build better solutions together.

#title
Learn, code, and build with our developer community
::

title

Use the #title slot to customize and add a title to the Page Section component.

::page-section
---
full-width: true
padding: "100px 20px"
color: "white"
background-image:
  url: "https://i.imgur.com/rU6cP5h.jpeg"
  background-size: "cover"
  background-position: "center"
  background-origin: "border-box"
  background-repeat: "no-repeat"
  background-overlay: "rgba(0,0,0, 0.1)"
---
Collaborate. Innovate. Build better solutions together.

#title
Learn, code, and build with our developer community
::