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.
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
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 — 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.
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.
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.
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
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.
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
Measurement Lab publishes the Internet Quality Barometer Framework
By Pavlos Sermpezis, Melissa Newcomb, Lai Yi Ohlsen
June 30, 2025
IP Route Survey (IPRS) data published in M-Lab
By Timur Friedman, Saied Kazemi, Elena Nardi
June 16, 2025
People Section
Displays team members from the people collection, filterable by category
Maintainers
Partners Section
Displays partner logos from the partners collection, filterable by category
All Partners
Institute for Local Self-Reliance
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.