Page Content:

Well Component

Overview

The Well component is a styled container that wraps content blocks. It supports customizable background color, padding, border radius, and max-width. When a dark background color is set, text automatically switches to white for readability.

Config

Wells have a config section with a number of options for controlling their appearance.

The options

Background Color: Sets the background color of the well (hex format, e.g. #f0f0f0). Dark colors automatically switch text to white.

Border Radius: Border radius in pixels (default: 8)

Border Color: Hex border color (e.g. #cccccc). No border by default.

Border Size: Border width in pixels. Only applies when border color is set. Defaults to 1px.

Padding: Inner padding, in 10px increments (default: 2)

Margin: Vertical (top and bottom) outer margin, in 10px increments (default: 0)

Width: Maximum width of the well content (e.g., 600px, 50%, auto)

Text Alignment: Alignment of text in the well (left, right, or center)

Analytics Label: Analytics events from within this well will include this label

ID: The HTML id of the well, can be referenced by anchor links

Pull Up: Pulls the well upward by the specified amount in rem units. Use with extra padding on the section above to create an overlap effect.

Examples

Basic well with default styling

This is a basic well with default settings. It has a default border radius of 8px and padding of 2.

Custom background color and border radius

This well has a custom background color and a larger border radius of 20px.

Dark background (auto white text)

This well has a dark background color. The text automatically switches to white for readability.

Custom width and text alignment

This well has a max width of 500px and center-aligned text.

Extra padding and margin

This well has padding set to 4 and margin set to 2, giving it more breathing room inside and out.

Border color only (default 1px)

This well has a border color set without a border size, so it defaults to a 1px solid border.

Border color + size + radius

This well has a 3px border with a custom color and 16px border radius.

Border with dark background

This well combines a dark background with a contrasting border color.

Pull Up (overlap into previous section)

The section below contains a well with pull_up. Combined with extra bottom padding on this section, the well visually overlaps upward.