Section types

How sections work

A section is the top-level visible building block on a page. One Section record can be placed on multiple pages. Its content and child rows are shared, while each page-section placement stores an independent order.

Most section types render inside a Bootstrap container and row. A section can set background_color, section_classes, section_styles, header and body text colors, desktop and mobile images, CTA buttons, animation, and status.

Rows are only rendered by section types that are designed to contain them. Text-only sections render their own fields; layout sections such as cards, sliders, pricing, and navbars expect rows with compatible row type_of values.

• Use status active for public content. Draft and unpublished sections remain useful for staging work.
• Use header_type and subheader_type to choose semantic heading tags or hide a heading.
• Use image_type background when the desktop image should become the section background; use foreground when the image should be placed as media inside the layout.
• Use section_classes and section_styles for Bootstrap utility classes or one-off inline styles when the default layout needs extra control.

text

A single-column copy section. It renders header, subheader, rich text body or raw_html fallback, and CTA buttons. It is best for introductions, prose blocks, notices, and simple calls to action.

hero

A page-opening promotional section. hero_type controls the composition: banner places the image above the copy area, while split creates a text-and-media hero.

Hero sections use header, body, CTA buttons, header_text_color, body_text_color, image styles, and the attached image. They are best when the page needs a strong first impression with direct action.

slider

A row-driven section for browsable or moving content. slider_variant controls slide content: mixed allows broad row support, cards renders card rows, image renders image rows, and split_rows renders split rows.

slider_behavior controls movement: auto renders an animated/autosliding compact track, while controls renders each row as a full-width slide with previous/next buttons.

Use card rows with any supported card_variant for auto card sliders, image rows with image_variant slider_item for image strips, testimonial rows for auto testimonial carousels, collapsible rows for mixed controlled FAQ slides, and split rows for full-width controlled story sliders.

cards

A card collection section. It renders each row as a card-like component and can use cards_per_row to create evenly sized card groups. Use it for feature grids, resource lists, testimonials, or repeated content blocks that should scan as a collection.

split_pane

A flexible two-column section. leading_cols controls how many of the 12 Bootstrap columns are given to the image/media side; alignment decides whether the text or image appears first on desktop; mobile_image_position controls mobile stacking.

content_type chooses between rendering raw_html directly or rendering normal text, CTA buttons, and child rows. Use vertical_text_alignment to align copy to the top, center, or bottom of the pane.

overlay

An overlay section for mounting trusted exported HTML over a section background color or background image. overlay_layout chooses split_pane or full_width.

For overlay_layout split_pane, overlay_content_position places native text in the leading or trailing pane and the fragment in the opposite pane.

Set overlay_fragment_source to section to deploy raw_html directly to the section, or row to render ordered built-in, Liquid-template, and raw_html child rows as a vertical stack. For overlay_layout full_width, full_width_content_position places native content above or below the stack, hides it, or uses spa_host for a full-width React/Vue host.

raw_html

A direct HTML escape hatch. The section renders raw_html without the standard section wrapper, then renders CTA buttons if configured. Use it for embeds, custom markup, and highly bespoke components that are not covered by the built-in layouts.

rows_in_columns

A column layout for ordered rows. columns sets how many columns to create, and rows_per_column sets how many rows are placed in each column before moving to the next. It also supports section header, subheader, and body above the columns. Choose columns and rows_per_column based on content length: avoid stacking several long cards in narrow columns, and prefer more columns or fewer rows per column when templated cards need room to grow.

pricing

A pricing-table section. It renders section header, subheader, and body, then lays out rows in a three-column pricing grid. Rows in pricing sections are forced to offer so each plan has consistent price, plan name, body, and CTA behavior.

navbar

A navigation section. It renders a brand label and its first action destination, then active navbar_link rows with one ordered action each.

navbar_overlay lets the nav sit over the next section. navbar_sticky sticks it to the top of the screen. navbar_scrolled_color changes from transparent to the section background color after scrolling when sticky behavior is enabled.