> For the complete documentation index, see [llms.txt](https://analog.groupthought.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://analog.groupthought.com/building-pages/pair.md). # Pair sections Use Pair for two-column layouts that stack on mobile, including heroes, media with text, and linked interactive blocks. A Pair puts two columns side by side, with one block in each column. Use a banner, video, slideshow, hotspots, card grid, before/after comparison, or Custom block. The columns stack on mobile. Pair accepts exactly two blocks and is disabled in headers, overlays, and drawers. ## Use Pair for related content The product page uses this layout: media on one side and the buy box on the other. The same section handles an image beside text, a video beside an FAQ, or a before/after comparison beside copy. Use Pair before building a custom two-column section. Start with "First column width" and "Set height by". These settings determine most of the layout. ## Choose the two blocks A column accepts any one of these blocks. You can put a slideshow beside Custom text, or hotspots beside a card grid. | Block | What goes in the column | | ------------------------------------- | ---------------------------------------------------------------- | | Banner (`_pair-banner`) | Image or video banner with overlay text, placement, parallax | | Pro banner (`_pair-pro-banner`) | Banner with finer layout and typography control | | Video (`_pair-video`) | Background or inline video | | Custom (`_pair-custom`) | Freeform text, buttons, accordion groups, or other nested blocks | | Slideshow (`_pair-slideshow`) | Multi-slide media carousel (syncs, see below) | | Hotspots (`_pair-hotspots`) | Image with positioned product or tooltip hotspots (syncs) | | Card grid (`_pair-card-grid`) | Product or content cards in a grid | | Card slider (`_pair-card-slider`) | Cards in a horizontal slider | | Card showcase (`_pair-card-showcase`) | Framed featured-card layout | | Before/after (`_pair-before-after`) | Draggable image comparison (syncs) | Column order follows block order. Reorder the blocks to swap the columns on desktop. Each block has its own color scheme and background, so the columns can use different schemes. See [color](/core-concepts/color.md). ## Column ratio "First column width" sets the desktop split. Columns stack to full width on mobile regardless. | Option | First column | Second column | Use for | | ------ | ------------ | ------------- | ----------------------------------- | | Wide | \~⅔ | \~⅓ | Dominant media, narrow caption | | Even | ½ | ½ | Balanced media and text | | Slim | \~⅓ | \~⅔ | Narrow media, dominant copy or form | The label describes the first column. "Slim" makes the first column slim and leaves more room for the second. ## Set height by This setting splits Pair into two different layouts. ### Section: both columns use one height Both columns use the "Section height" setting. Choose full screen, a screen fraction down to one quarter, content height, or a custom px/% value. Use this for a hero with an image and text panel that need aligned edges. Shorter content centers inside its column. ### Column: each column uses its content height Each column uses its own content height. Use this for a long text column beside a short image. Column mode shows two controls that Section mode hides: * "Short column placement": place the shorter column at the top (⤒), center (—), or bottom (⤓) of the taller one. * "Short column sticky": pin the short column to the viewport while the tall column scrolls. Placement "⤒" pins it to the top. "⤓" pins it to the bottom of the tall column's scroll. {% hint style="info" %} Sticky and placement are only available in Column mode. Section mode makes both columns the same height, so there is no short column to align. {% endhint %}
A Pair in Column height mode with a sticky short column beside scrolling content

Column height mode with the short column pinned while the taller column scrolls.

## Gap The "Gap" setting has no "None" option. Set "Gap" to "⋯" and "Custom gap" to 0 to join the columns with no seam. Analog then removes shared rounding at the join, so an image can meet a colored text panel without a visible break. The "Pair text and image" preset uses this setup. ## Link interactive content "Link interactive content" is on by default. It keeps slideshows, accordions, hotspots, and tabs in the two columns on the same item. When it is on, "Auto-rotate slides" and "Change slides every" move to the section settings so both blocks use the same timer. The blocks' autoplay settings are hidden. Turn it off when the two columns should run independently, such as an autoplaying slideshow beside a manually driven accordion. ## Mobile Columns stack vertically on mobile. "Mobile order" controls which one comes first. "Normal" keeps the block order and "Reversed" flips it. Use "Reversed" to put the image first on mobile when text comes first on desktop. ## Recipes ### Classic hero Use Section height mode to lock both columns to one height: * Blocks: Banner in column one, Custom (heading, text, button) in column two * Columns › First column width: "Even" * Section layout › Set height by: "Section" * Section layout › Section height: "One half screen" ### Editorial scroll with a pinned image Use Column height mode with "Short column sticky" to keep the image in view while the copy scrolls: * Blocks: Custom (rich text) in column one, Hotspots in column two * Section layout › Set height by: "Column" * Section layout › Short column placement: "⤒" * Section layout › Short column sticky: on ### Synced compare-and-explain Use "Link interactive content" to drive a before/after from a set of tabs: * Blocks: Before/after in column one, Custom with a tabs group in column two * Interactive content › Link interactive content: on ### Gapless full-bleed pair Use a custom gap of 0 with full width for edge-to-edge media against a colored panel: * Blocks: Banner in column one, Custom in column two with a background color * Section layout › Width: "Full" * Columns › Gap: "⋯" * Columns › Custom gap: 0 ## See also * [Card sections](/building-pages/cards.md): card grid, slider, and showcase blocks for a Pair column * [Backgrounds](/building-pages/backgrounds.md): image, video, and overlay settings for banner blocks * [Product page & quickview](/features/product.md): the product page layout * [Layout blocks](/building-pages/layout-blocks.md): blocks available inside a Custom column