Components

Page Section

A page-level section component designed to organize and group content into sections within a page.

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.

Most content, including other components, should typically reside within a parent "page-level" component, like a Page Section, to account for proper structure and padding.

Learn, code, and build with our developer community

Collaborate. Innovate. Build better solutions together.
::page-section
---
tag: "section"
full-width: true
margin: "0px"
padding: "100px 20px"
vertical-align: "top"
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
::
PageSection Component Props

The HTML tag to utilize for the wrapper (or main) element in the component. Accepts string.

Should the main element content extend full width to the edge of the page. Accepts boolean.

The margin of the component. Accepts string | null.

The padding of the component. Accepts string | null.

Vertically aligns the content within the container. Accepts one of `top` | `center` | `bottom`.

Horizontally aligns the content within the container. Accepts one of `'left'` | `'center'` | `'right'`.

Aligns the text displayed in the component. Accepts values for text-align css property.

The text color of the element. Accepts string.

The background color of the component. Accepts string | null.

The background image of the component. Accepts `BackgroundImage` interface.

The background URL. Should be an absolute or full URL.

The background image position. Accepts CSS values for background-position.

The background image origin. Accepts CSS values for background-position. Default is 'padding-box'.

The background image repeat. Accepts CSS values for background-origin. Default is `no-repeat`.

The background image size. Accepts CSS values for background-size. Default is `auto`.

Adds an overlay over the background image. Accepts a color as a string, hex, or rgba format.

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
}

Learn, code, and build with our developer community

Collaborate. Innovate. Build better solutions together.
::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"
vertical-align: "top"
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
::
PageSection Component Props
Adds customization for the title. Accepts PageSectionTitle object.

Title font size.

Title font weight.

Title line height.

Title paddings.

Title margin.

Title text color.

Title text align. Accepts values for text-align css property.

HTML tag to use for the title.

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.
  • fullWidth - default is false.
  • maxWidth - default is 1280px.
  • padding - default is 20px.
  • margin - default is 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.

Learn, code, and build with our developer community

Collaborate. Innovate. Build better solutions together.
::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.

Learn, code, and build with our developer community

Collaborate. Innovate. Build better solutions together.
::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
::