Section Showcase
A comprehensive showcase of every available page section type with multiple variations.
Hero Section
The hero section displays a prominent title and optional subtitle over a zigzag background. It is used for visual page breaks and emphasis. This is the primary-light variant.
Hero Section Variations
The hero section supports 8 zigzag color variants. Each one renders the signature triangular/zigzag decorative background in a different color from the palette. Heroes are great for separating major page sections visually.
Primary Dark
zigzag variant — primary-dark
Secondary Light
zigzag variant — secondary-light
Secondary Dark
zigzag variant — secondary-dark
Supporting 1 Light
zigzag variant — supporting1-light
Supporting 1 Dark
zigzag variant — supporting1-dark
Supporting 2 Light
zigzag variant — supporting2-light
Supporting 2 Dark
zigzag variant — supporting2-dark
Speed Light
zigzag variant — speed-light
Speed Dark
zigzag variant — speed-dark
Rich Text Section
Renders markdown content with optional table of contents
Rich Text — White Background
The richText section renders markdown content. It supports full markdown syntax including headings, paragraphs, lists, links, bold, italic, code blocks, and images. This is the most common section type used throughout the site.
Features
- Full markdown rendering with image processing
- Optional table of contents sidebar (set
withTOC: true) - Supports all standard background color options
- Images use
/src/assets/...paths and are optimized at build time
When to Use
Use richText for any long-form content — articles, documentation, descriptions, or any page that needs formatted text with headings and lists.
Rich Text — Gray Background
This richText section uses background.color: gray, which renders a light neutral background. Gray backgrounds are useful for visually separating content sections and creating contrast between adjacent white sections.
Rich Text — Primary Light Background
This richText section uses background.color: primary-light. Light color backgrounds are good for highlighting important content without overwhelming the reader. Text automatically adjusts for readability.
Rich Text — Primary Medium Background
This richText section uses background.color: primary-medium. Medium backgrounds provide stronger emphasis. Text color adjusts to white for readability on darker backgrounds.
Rich Text — Primary Dark Background
This richText section uses background.color: primary-dark. Dark backgrounds create the strongest visual emphasis. Best used sparingly for key messages or CTAs.
Rich Text — Speed Light Background
This richText section uses background.color: speed-light. A link and some inline code are included to check contrast on a tinted background.
Rich Text — Speed Dark Background
This richText section uses background.color: speed-dark. A link and some inline code are included to check that content inverts on dark backgrounds.
Rich Text — With Table of Contents
When withTOC is set to true, a table of contents sidebar is generated automatically from the markdown headings. The TOC appears on medium-sized screens and above, positioned to the side of the content.
How TOC Works
The table of contents is built from all ## and ### headings in the markdown. It provides quick navigation for long content sections.
Best Practices
- Use TOC for pages with 3 or more headings
- Keep heading text concise for clean TOC display
- TOC is hidden on mobile and shown on desktop
Example Use Cases
Documentation pages, data guides, policy pages, and any long-form content benefits from a table of contents for navigation.
Button Section
Displays a title with a row of call-to-action buttons
Primary Buttons (All Sizes)
Button Color Variants (Medium Size)
Buttons on Dark Background
Card Section
Displays a grid of cards with icons, images, colors, and optional buttons
Cards with Icons
Cards can display custom M-Lab icons. Each icon renders inside the card's colored header area. Available icons are measurement, insights, community, mlab-blue, and mlab-white.
Measurement
The measurement icon represents M-Lab's core testing infrastructure and tools.
Insights
The insights icon represents data analysis, research findings, and reports.
Community
The community icon represents collaboration, partners, and open-source contributors.
Cards with Color Variations
Cards support 6 color options from the design palette. The color determines both the header background and the border accent.
Primary
Uses the primary color palette — the main brand color.
Secondary
Uses the secondary color palette — complementary to primary.
Supporting 1
Uses the supporting1 color palette — for variety and emphasis.
Supporting 2
Uses the supporting2 color palette — warm accent tones.
Neutral
Uses the neutral color palette — subtle and understated.
Speed
Uses the speed color palette — purple tones for speed-related content.
Cards with Buttons
Each card can include an optional call-to-action button. The section itself can also have buttons below the card grid.
Another Card with CTA
Buttons inside cards are useful for directing users to detail pages.
Third Card
Not every card in a group needs a button — they are optional.
Cards on Gray Background
Card sections can use any background color. A gray background helps the white card bodies stand out with more contrast.
M-Lab Blue Icon
The mlab-blue icon shows the M-Lab logo mark in blue.
M-Lab White Icon
The mlab-white icon shows the M-Lab logo mark in white on a colored background.
Cards on Speed Dark Background
Checks that a card section stays readable on a dark background: the section title and description invert, while the card bodies keep their own light surface.
Measurement
Card bodies carry their own background, so they are unaffected by the section.
Insights
The section title and description above invert to white.
Flexi Section
A container that wraps other sections with a title and description
Flexi on Gray Background
The flexi section is a container that displays a title and description, then renders nested child sections inside it. It is useful for grouping related content under a shared heading.
Nested Rich Text
This richText section is nested inside a flexi container. Flexi sections can contain any other section type, allowing flexible page composition.
Flexi on Primary Light
Flexi sections support all background colors. This one uses primary-light to create a colored container around its nested content.
This content inherits the visual context of its flexi parent. Nesting allows you to create visually grouped content blocks without building custom components.
Flexi on Dark Background
Dark flexi backgrounds are useful for creating high-contrast feature sections. Text automatically switches to white for readability.
Nested content inside a dark flexi section. The combination of flexi with richText, buttons, or cards creates versatile page layouts.
Speed Test Section
Displays a speed test call-to-action with a link to the M-Lab speed test
Run a Speed Test
The speed_test section renders a prominent call-to-action linking to speed.measurementlab.net. It displays a title, optional description, and a large speed test button. Typically used on the homepage.
Blog Roll Section
Displays the latest blog posts in a card grid
Latest Blog Posts (Limit 3)
The blog_roll section fetches published blog posts and displays them as cards. The limit parameter controls how many posts to show (1-12, default 3). Set showMore to true to display a link to the full blog listing.
Test Blog
By Georgia Bullen, Tin Geber
February 12, 2026
Measurement Lab completes first prototype for IQB Framework
By Melissa Newcomb, Pavlos Sermpezis
January 29, 2026
A Hands-On Tutorial with Reverse Traceroute
By Loqman Salamatian
November 13, 2025
Blog Roll — 6 Posts on Gray
A larger blog roll with 6 posts on a gray background. The gray background creates visual separation from surrounding sections.
Test Blog
By Georgia Bullen, Tin Geber
February 12, 2026
Measurement Lab completes first prototype for IQB Framework
By Melissa Newcomb, Pavlos Sermpezis
January 29, 2026
A Hands-On Tutorial with Reverse Traceroute
By Loqman Salamatian
November 13, 2025
Open Measurement Hackathon at the ACM Internet Measurement Conference (IMC) 2025
By Chris Ritzo, Melissa Newcomb, Pavlos Sermpezis
November 12, 2025
Measurement Lab publishes new dataset of NDT7 measurements
By Matt Mathis, Roberto D'Auria, Nathan Kinkade, Pavlos Sermpezis, Melissa Newcomb
July 15, 2025
OMG! Summary of the 3rd Open Measurement Gathering (OMG) Ask Me Anything (AMA) event
By Pavlos Sermpezis, Melissa Newcomb
July 15, 2025
Related Posts Section
Displays up to three hand-picked blog posts in a card grid
Hand-Picked Posts
The related_posts section uses the same card layout as blog_roll, but you choose the posts yourself instead of pulling the latest ones. Pick up to 3 posts in the CMS; they appear in the order you select them. Posts that are drafts or archived are skipped automatically. The description is optional.
Tests Section
Displays hand-picked tests from the tests collection in a card grid
Featured Tests
The tests section uses the same card as the /tests listing page, but you choose which tests appear instead of showing all of them grouped by status. Pick any number of tests in the CMS; they appear in the order you select them. Tests that are drafts or archived are skipped automatically. Unlike the /tests listing, a test hidden with "Show in index" off will still render here if you pick it explicitly. The description is optional.
NDT (Network Diagnostic Tool)
Tests your connection speed, and provides a sophisticated diagnosis of problems limiting speed.
MSAK
MSAK (Measurement Swiss-Army Knife) implements a configurable Websocket-based throughput measurement protocol, and a UDP-based latency measurement protocol.
Wehe
Wehe uses your device to exchange Internet traffic recorded from real, popular apps like YouTube and Spotify, and attempts to tell you whether your ISP is giving different performance to an app's network traffic.
People Section
Displays team members from the people collection, filterable by category
People Section
The people section queries the people collection and displays members in a grid. Use the optional category field to filter by group — Maintainers, Experiment Review Committee, Advisory Committee, M-Lab Founders, or Alumni.
Maintainers
Partners Section
Displays partner logos from the partners collection, filterable by category
All Partners
Cloudflare Radar
Giga
IIJ Research Laboratory
Institute for Local Self-Reliance
RNP
Supporting Partners Only
Institute for Local Self-Reliance
Featured Partners Section
Displays top partners in an alternating left-right layout
Featured Partners
The featured_partners section shows the top 9 partners (sorted by order field) in an alternating 2-3 column grid layout. Typically used on the homepage to highlight key partnerships.
Infrastructure Map Section
Displays an interactive Mapbox map of M-Lab server locations worldwide
M-Lab Infrastructure
The infrastructureMap section renders an interactive map showing M-Lab server locations around the world. It uses Mapbox with clustering and popups. Typically used on the status page.
Background Color Comparison
All 5 background color options side by side
Background: white — The default. Transparent/white background for standard content areas.
Background: gray — Light neutral background (neutral-200). Good for alternating sections.
Background: primary-light — Light brand color (primary-100). Subtle emphasis.
Background: primary-medium — Medium brand color (primary-700). Strong emphasis, white text.
Background: primary-dark — Dark brand color (primary-900). Maximum contrast, white text.