> For the complete documentation index, see [llms.txt](https://docs.scaleflex.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.scaleflex.com/portals/building-a-portal/sections/section-library.md). # Section library Every section type available in a Portal, and the variants of each. This is the reference: what each section is for, and what its variants look like. To add any of them, open the **Sections** panel and select [**Add section**](/portals/building-a-portal/sections/working-with-sections.md).

The section library, opened from Add section — section types on the left, their variants previewed beside them.

## Sample content Every variant is previewed filled with sample content, and a section arrives on your page with that sample content still in it — copy and imagery for you to replace with your own. The **Sample content brand** dropdown at the top of the library chooses which fictional brand the sample imagery comes from. Pick the one closest to what you're building and both the previews and the sections you add look less abstract while you work.

The Sample content brand dropdown, at the top of the library.

| Brand | Sector | | ---------------- | -------------------------------- | | **Trestle** | Home & lifestyle goods | | **Rannoch** | Outdoor apparel & equipment | | **Halstead** | Residential property development | | **Ridley House** | Contemporary art institution | {% hint style="info" %} This is a preference of yours, not a setting of the Portal's. It changes the sample **images** only, it's saved in your browser on that one device, and it has no effect on a published Portal or on what a colleague sees. {% endhint %} ## Opening and closing a page | Section | What it's for | Variants | | ------------------ | ----------------------------------------------------------------------- | -------- | | **Hero** | The first thing on a page — a headline, some copy, and usually imagery. | 10 | | **Header** | A section title and intro, to open a part of the page. | 8 | | **Banner** | A wide image, inside the page width or edge to edge. | 2 | | **Call to action** | A single ask, with a button. | 3 | ## Telling the story | Section | What it's for | Variants | | ------------------- | ------------------------------------------------- | -------- | | **Text** | Longer copy, alone or beside an image. | 7 | | **Info panel** | A short callout that needs to stand out. | 1 | | **Incentives** | A few short benefits, each with an icon. | 4 | | **Steps** | A sequence — numbered steps, or a dated timeline. | 3 | | **Stats** | Figures worth showing large. | 5 | | **Reviews** | Quotes from people, with attribution. | 3 | | **FAQ** | Questions that expand to their answers. | 3 | | **Do's and don'ts** | Correct and incorrect usage, side by side. | 2 | ## Showing assets | Section | What it's for | Variants | | ----------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | | [**Gallery**](/portals/building-a-portal/sections/gallery.md) | A live gallery of DAM assets inside a page, with search and filters. Has its own settings — see [Gallery](/portals/building-a-portal/sections/gallery.md). | 1 | | [**Moodboard**](/portals/building-a-portal/sections/moodboard.md) | A collection as a wall to explore — hover to enlarge, type to re-rank. See [Moodboard](/portals/building-a-portal/sections/moodboard.md). | 2 | | **Media** | One image or video, with copy beside or under it. | 6 | | **Slider** | A carousel of images or banners. | 3 | | **Downloads** | Files to take away, each with a download button. | 3 | | **Icons and logos** | Brand marks, with usage notes and downloads. | 5 | | **Color palette** | Brand colours with their values. | 6 | | **Typography** | Typefaces and the type scale. | 2 | {% hint style="info" %} For a gallery that fills a whole page rather than sitting inside one, you don't add a section — you create an **Asset gallery** page. See [Custom pages](/portals/building-a-portal/pages/custom-pages.md). {% endhint %} ## Sending files Everything above hands assets to a visitor. This one goes the other way. | Section | What it's for | Variants | | ------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | | [**Share your files**](/portals/building-a-portal/sections/share-your-files.md) | A drop zone where visitors send files of their own and get a share link back. See [Share your files](/portals/building-a-portal/sections/share-your-files.md). | 4 | ## Finding things | Section | What it's for | Variants | | -------------- | ------------------------------------------------------------------- | -------- | | **Search** | A search box, with or without filters. | 5 | | **Categories** | Cards that lead somewhere — the main way into the rest of a Portal. | 14 | | **Tabs** | Several panels of content behind one row of tabs. | 2 | ## Lists and records | Section | What it's for | Variants | | ----------------- | ------------------------------------------------ | -------- | | **Blog** | Articles with a thumbnail, title and excerpt. | 4 | | **Release notes** | Dated entries of what changed. | 8 | | **Directory** | A numbered index of people, places or things. | 1 | | **Agenda** | A schedule of time-stamped rows, grouped by day. | 2 | | **Contact** | People to get in touch with. | 2 | | **Pricing** | Plan cards with features and a button. | 1 | ## Around the page These are not added from the library in the usual way — they belong to the Portal or to the page structure rather than to the stack of sections. | Section | What it's for | | ------------------ | ----------------------------------------------------------------------------------- | | **Footer** | The Portal's footer, with its navigation columns. Edited once for the whole Portal. | | **Sidebar banner** | A banner in the sidebar rail, optionally with search. | | **Activity** | Recently or most downloaded assets, shown in the sidebar area. | *** ## The variants ### Hero | | | | ----- | ---------------------------------------------------------------- | | **A** | Headline, copy and two buttons beside one large image. | | **B** | Headline and buttons beside a collage of five tiles. | | **C** | Headline and copy beside seven promo image tiles. | | **D** | Text-only hero over a full-width background image. | | **E** | Hero copy and buttons above three category tiles. | | **F** | Split hero with copy and one image — mirror of A. | | **G** | Split hero with an image and a testimonial card. | | **H** | Centered headline, copy and buttons above one image. | | **I** | Copy and a scrolling card rail over a background photo. | | **J** | Full-bleed cover story — an eyebrow and headline over the image. | ### Header | | | | ----- | --------------------------------------------------------- | | **A** | Centered heading and paragraph on a plain background. | | **B** | Left-aligned heading and paragraph on a plain background. | | **C** | Rounded colored card with copy left, illustration right. | | **D** | Rounded colored card with illustration left, copy right. | | **E** | Rounded colored card with centered heading and copy. | | **F** | Colored band with an eyebrow above a centered statement. | | **G** | Photographic band with breadcrumb, title, lede and facts. | | **H** | Photo banner card with a title and a row of facts. | ### Banner | | | | ----- | ------------------------------------------------------ | | **A** | Banner image within the page width, with side margins. | | **B** | Edge-to-edge banner image spanning the full width. | ### Call to action | | | | ----- | ------------------------------------------------------------ | | **A** | Centered headline, subtext and buttons in a filled panel. | | **B** | Centered headline, subtext and buttons — no panel. | | **C** | Compact band with icon, headline and a right-aligned button. | ### Text | | | | ----- | ---------------------------------------------------------- | | **A** | Heading, two text columns and a button above a screenshot. | | **B** | Text column beside a sticky product screenshot right. | | **C** | Single narrow column with eyebrow, heading and paragraphs. | | **D** | Large photo on the left half, text stacked right. | | **E** | Wide text column with a testimonial in a right rail. | | **F** | Article copy with a rail of facts and contacts beside it. | | **G** | A page header — eyebrow, title and standfirst. | ### Info panel | | | | ----- | ----------------------------------------------------------- | | **A** | Tinted callout panel with a sparkle icon and bullet points. | ### Incentives | | | | ----- | --------------------------------------------------------- | | **A** | Split header with copy and photo, above three icon items. | | **B** | Left-aligned heading above three icon items in a row. | | **C** | Centered heading above three icon items in a row. | | **D** | Two bordered cards with an icon and longer copy. | ### Steps | | | | ----- | ------------------------------------------------------------- | | **A** | Grid of filled cards pairing a big index number with a label. | | **B** | Vertical numbered timeline with titles and descriptions. | | **C** | Dated milestone timeline on a rail, for a history. | ### Stats | | | | ----- | -------------------------------------------------------------- | | **A** | Centered heading above four tinted metric cards with captions. | | **B** | Plain centered metrics over captions, with column dividers. | | **C** | Three outlined cards, each a big figure over a caption. | | **D** | Four figures ruled apart, each over an uppercase caption. | | **E** | Figures beside a block of boilerplate copy. | ### Reviews | | | | ----- | -------------------------------------------------------- | | **A** | Stacked reviews with avatar, name, rating and text. | | **B** | Grid of bordered quote cards with stars and reviewer. | | **C** | Three white quote cards crediting the person underneath. | ### FAQ | | | | ----- | ---------------------------------------------------------- | | **A** | Centered heading above a single-column list of Q\&A items. | | **B** | Accordion rows expanding to text beside an image. | | **C** | Grid of collapsible cards with a kicker and teaser. | ### Do's and don'ts | | | | ----- | --------------------------------------------------------------- | | **A** | Two columns pairing a do with a don't. | | **B** | Borderless grid of specimens, each marked with its own verdict. | ### Gallery | | | | ----- | ----------------------------------------------------------- | | **A** | Live gallery from your asset library, with search and tabs. | Everything this section can be configured to do — its source, display mode, view options, metadata and filters — is covered in [Gallery](/portals/building-a-portal/sections/gallery.md). ### Moodboard | | | | ----- | ----------------------------------------------------------------------------------- | | **A** | Scattered wall of library images with a ranking search. | | **B** | Endless canvas of library images — drag, zoom, and search pulls the matches to you. | Its source, search mode and the suggestions under its search are covered in [Moodboard](/portals/building-a-portal/sections/moodboard.md). ### Media | | | | ----- | -------------------------------------------------------------- | | **A** | Centered heading and copy above a media tile with play button. | | **B** | Text left, media tile with a play button on the right. | | **C** | Media tile with a play button left, text on the right. | | **D** | Wide image with a caption card over its bottom corner. | | **E** | Dark player panel with a scrolling playlist beside it. | | **F** | A grid of videos, each tile with its own play button. | ### Slider | | | | ----- | ----------------------------------------------------------- | | **A** | Carousel of image cards with title, copy and a view button. | | **B** | Carousel of wide banner slides with title, copy and button. | | **C** | Carousel of wide slides with copy over a gradient scrim. | ### Downloads | | | | ----- | ---------------------------------------------------------------- | | **A** | Bordered cards pairing a file icon, caption and download button. | | **B** | Centered cards, icon on a tinted plate above the caption. | | **C** | Wide rows with a photo thumbnail and a download button. | ### Icons and logos | | | | ----- | ------------------------------------------------------ | | **A** | Grid of bordered icon cards with a caption under each. | | **B** | Single centered row of colorful icons — no borders. | | **C** | Single centered row of monochrome brand logos. | | **D** | Logo on a plate left, usage copy and downloads right. | | **E** | Lockup cards with a light/dark stage switch. | ### Color palette | | | | ----- | ------------------------------------------------------ | | **A** | Grid of swatch cards with HEX, RGB and CMYK values. | | **B** | Large color-filled cards with name, hex and role. | | **C** | Circular gradient swatches labelled with both stops. | | **D** | Compact tint tiles, each with a name and hex. | | **E** | Text-on-color specimens with measured contrast ratios. | | **F** | Cards with a word set in its own color and hex. | ### Typography | | | | ----- | ------------------------------------------------------ | | **A** | One typeface: an "Aa" tile beside its type scale. | | **B** | Typeface cards, each an "Aa" band over name and notes. | ### Share your files | | | | ----- | ----------------------------------------------------------- | | **A** | Headline and highlights beside a drag-and-drop upload zone. | | **B** | Centered headline above a drag-and-drop upload zone. | | **C** | Boxed callout card with a compact drop zone. | | **D** | Split layout with headline beside the drop zone. | What a visitor goes through after dropping a file, and how long a share lasts, is covered in [Share your files](/portals/building-a-portal/sections/share-your-files.md). ### Search | | | | ----- | ----------------------------------------------------------- | | **A** | Centered heading with a full-width search box — no filters. | | **B** | Heading and search over an image, with logo filter cards. | | **C** | Centered heading and search box with filter pills below. | | **D** | Raised dock with the search box and filter pills inline. | | **E** | Pill search box over two-line destination cards. | ### Categories | | | | ----- | -------------------------------------------------------- | | **A** | Heading and intro above three image cards with buttons. | | **B** | Four compact cards with titles over dark-scrim images. | | **C** | Four filled cards with title, caption and an icon. | | **D** | Two wide cards with image, caption and optional buttons. | | **E** | Four cards with titles over fixed-height images. | | **F** | Four-column cards with image on top, title and caption. | | **G** | Filled icon cards, one able to span two columns. | | **H** | Compact shortcut strip of icon chips in one panel. | | **I** | Photo card grid closed by one wide catch-all tile. | | **J** | Square photo wall with a caption pill on every tile. | | **K** | A row of pill-shaped shortcuts. | | **L** | A heading and link above a row of pinned cards. | | **M** | A two-column bento grid mixing tile sizes. | | **N** | A grid that groups destinations by type. | ### Tabs | | | | ----- | ------------------------------------------------------- | | **A** | Tab bar where each tab reveals its own panel of copy. | | **B** | Tab bar where each panel pairs an image with body copy. | ### Blog | | | | ----- | ----------------------------------------------------------------- | | **A** | Single-column rows with a thumbnail, title, excerpt and author. | | **B** | Centered heading over a three-column card grid. | | **C** | Single-column rows with a show-all button by the heading. | | **D** | Two-column card grid with heading, subtext and a show-all button. | ### Release notes | | | | ----- | -------------------------------------------------------------- | | **A** | Document layout with a dated title and grouped bullet changes. | | **B** | Dark card with a version header and grouped change lists. | | **C** | Dated rows in one panel — a compact activity feed. | | **D** | Page-wide dated record with a left date rail. | | **E** | Long-form entry: labelled caption beside wide media. | | **F** | Dense changelog rows with labels and a filter bar. | | **H** | Dated entries as headline teasers. | | **I** | A dated news archive. | ### Directory | | | | ----- | -------------------------------------------------------- | | **A** | Numbered rows that cycle, each previewing its own photo. | ### Agenda | | | | ----- | ----------------------------------------------------- | | **A** | Collapsible day over a timeline of time-stamped rows. | | **B** | Events as cards rather than a timeline. | ### Contact | | | | ----- | -------------------------------------------------------- | | **A** | Grid of contact cards with avatar, name, role and email. | | **B** | Bordered cards with a round portrait, name and role. | ### Pricing | | | | ----- | ------------------------------------------------------------- | | **A** | Three plan cards with name, price, features and a CTA button. |