Unstack for Developers
  • Overview
  • Getting started
    • Custom Themes
    • Custom Components
  • Component Types
    • Section
    • Header & Footer
    • Banner
  • Basic Tags
    • Actions
    • Box
    • Code
    • Element
    • Media
    • Plaintext
    • Richtext
    • Collection
    • Article Collection
  • eCommerce Tags
    • Product
    • Product Inventory
    • Product Price
    • Product Options
    • Quantity Selector
    • Cart & Drawer (soon)
  • Utility Tags
    • Generator
    • JSONParser
  • Other NoML Features
    • Variables
    • Raw HTML
    • Component Properties
Powered by GitBook
On this page
  1. Component Types

Section

PreviousCustom ComponentsNextHeader & Footer

Last updated 1 year ago

The <Section> tag is required for all components. It is a block-level tag that renders as an element in the outputted HTML.

<Section dataRef={content.section} enableHeader={true}>
...
</Section>

Attributes

  • dataRef: DataLocator - The data-element storing the Section's configuration

  • className: string (optional) - A hard-coded class name to add to the rendered element (Default: none)

  • defaultPaddingTop: number (optional) - A number from 0-10 indicating the default top padding of the Section Box-Wrapper (Default: 8)

  • defaultPaddingRight: number (optional) - A number from 0-10 indicating the default right padding of the Section Box-Wrapper (Default: 2)

  • defaultPaddingBottom: number (optional) - A number from 0-10 indicating the default bottom padding of the Section Box-Wrapper (Default: 8)

  • defaultPaddingLeft: number (optional) - A number from 0-10 indicating the default left padding of the Section Box-Wrapper (Default: 2)

  • defaultMaxWidth: number (optional) - A number indicating the default max width in px of the Section Box-Wrapper (Default: 1200)

  • defaultTextAlignment: string (optional) - A string ("left", "right", or "center") indicating the default alignment of the Section Box-Wrapper (Default: "center")

  • defaultTextTheme: string (optional) - A string ("dark-bg" or "light-bg") indicating the default text theme to use for the component

  • defaultBackgroundColor: string (optional) - A CSS color value indicating the default background color (Default: none)

  • enableHeader: boolean (optional) - When true, allows content authors to add a section-header to this section type (Default: false)

  • location: Array<string> (optional) - Where the component can appear; can include 'header', 'main', and 'footer' (Default: ['main'])

  • properties: Array<[object]> (optional) - defines properties that content authors can configure within the page editor. For details see .

custom properties