Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Twilio Paste - page-header
Getting started
Twilio Paste
Paste UI
Pro
Components
Account Switcher
Ai Chat Log
Alert
Alert Dialog
Anchor
Aspect Ratio
Avatar
Badge
Blockquote
Breadcrumb
Button
Button Group
Callout
Card
Chart Provider
Chat Composer
Chat Log
Checkbox
Code Block
Combobox
Corner Ornament
Data Grid
Date Picker
Description List
Detail Text
Disclosure
Display Heading
Display Pill Group
Editable Code Block
Example Text
File Picker
File Uploader
Flex
Form Layout
Form Pill Group
Grid
Heading
Help Text
Icon
In Page Navigation
Inline Code
Input
Keyboard Key
Label
List
Media Object
Menu
Meter
Minimizable Dialog
Modal
Multiselect Combobox
Page Header
Pagination
Paragraph
Popover
Product Switcher
Progress Bar
Progress Steps
Radio Button Group
Radio Group
Screen Reader Only
Select
Separator
Side Modal
Side Panel
Sidebar
Sidebar Navigation
Skeleton Loader
Slider
Spinner
Stack
Status Badge
Status Menu
Summary Detail
Switch
Table
Tabs
Textarea
Time Picker
Timeline
Toast
Tooltip
Topbar
Truncate
User Dialog
Visual Picker
<ol> <li><strong>PageHeaderSetting</strong> contains any components that relate to the positioning of the current page in relation to parent or sibling pages, including navigating between those pages.</li> <li><strong>PageHeaderDetails</strong> is where all page-related information belongs. It includes static text and interactive components that relate to the page as a whole.</li> <li><strong>PageHeaderInPageNavigation</strong> contains the In Page Navigation for the page content, if using.</li> </ol> <div class="callout"> <div class="callout-heading">Using Alerts with Page Headers</div> <div class="callout-text">There are times when you'll need to display an Alert at the top of a page to communicate an important message to the user. Place Alerts above the Page Header. Alerts should not be children of the Page Header component.</div> </div> </div> <!-- Interrupted Flow Example --> <div class="example-section"> <h2 class="example-title">Page Header in an interrupted flow</h2> <div id="interrupted-example"></div> </div> <!-- Compact Page Header Example --> <div class="example-section"> <h2 class="example-title">Compact Page Header</h2> <div id="compact-example"></div> </div> <!-- Object Details Example --> <div class="example-section"> <h2 class="example-title">Page Header on an object details page</h2> <div id="object-details-example"></div> </div> <!-- Objects List Example --> <div class="example-section"> <h2 class="example-title">Page Header on an objects list page</h2> <div id="objects-list-example"></div> </div> <!-- Settings Example --> <div class="example-section"> <h2 class="example-title">Page Header on a settings page</h2> <div id="settings-example"></div> </div> <!-- Wizard Example --> <div class="example-section"> <h2 class="example-title">Page Header on a wizard page</h2> <div id="wizard-example"></div> </div> <!-- Accessibility Section --> <div class="guidelines-section"> <h2>Accessibility</h2> <p>Page Header has no inherent accessibility concerns. However, there will likely be accessibility concerns related to the components used within Page Header. Recommended considerations include:</p> <ul> <li>The accessibility considerations of the components used. Refer to each component's documentation.</li> <li>The order and visual or content hierarchy of the children passed to Page Header, and how they affect readability.</li> <li>What you pass to the <code>as</code> property when using Headings. Headings that live at the top of the page and are the title of the page should be <code>h1</code>s.</li> </ul> </div> <h2 id="feedback">Feedback</h2> <p>Help us improve this component by providing feedback, asking questions on Slack, or updating this file on GitHub.</p> </div> <script type="module"> import { render } from "https://cdn.jsdelivr.net/npm/react@18/+esm"; import { createElement as h } from "https://cdn.jsdelivr.net/npm/react@18/+esm"; // Mock React components for demonstration const mockComponents = { PageHeader: ({ children, ...props }) => h("div", { className: "paste-page-header", ...props }, children), PageHeaderSetting: ({ children }) => h("div", { className: "paste-page-header-setting" }, children), PageHeaderDetails: ({ children }) => h("div", { className: "paste-page-header-details" }, children), PageHeaderHeading: ({ children, as = "h1" }) => h(as, { className: "paste-page-header-heading" }, children), PageHeaderActions: ({ children }) => h("div", { className: "paste-page-header-actions" }, children), PageHeaderParagraph: ({ children }) => h("p", { className: "paste-page-header-paragraph" }, children), PageHeaderInPageNavigation: ({ children }) => h("div", { className: "paste-page-header-nav" }, children), PageHeaderMeta: ({ children }) => h("div", { className: "paste-page-header-meta" }, children), PageHeaderKeyword: ({ children }) => h("div", { className: "paste-page-header-keyword" }, children), PageHeaderPrefix: ({ children }) => h("div", { className: "paste-page-header-prefix" }, children), PageHeaderSeparator: () => h("hr", { className: "paste-separator" }), Breadcrumb: ({ children }) => h("nav", { className: "paste-breadcrumb" }, children), BreadcrumbItem: ({ children, href }) => h("a", { href, className: "paste-breadcrumb-item" }, children), Button: ({ children, variant = "primary", size = "default" }) => h("button", { className: `paste-button paste-button-${variant} paste-button-${size}` }, children), ButtonGroup: ({ children }) => h("div", { className: "paste-button-group" }, children), Badge: ({ children, variant = "default" }) => h("span", { className: `paste-badge paste-badge-${variant}` }, children), InPageNavigation: ({ children }) => h("nav", { className: "paste-in-page-nav" }, children), InPageNavigationItem: ({ children, href }) => h("a", { href, className: "paste-in-page-nav-item" }, children), Anchor: ({ children, href }) => h("a", { href, className: "paste-anchor" }, children), Avatar: ({ name, size = "sizeIcon70" }) => h("div", { className: `paste-avatar ${size}` }, name?.[0] || "U"), StatusBadge: ({ children, variant = "default" }) => h("span", { className: `paste-status-badge paste-status-badge-${variant}` }, children), ProgressSteps: ({ children }) => h("div", { className: "paste-progress-steps" }, children), ProgressStepComplete: ({ children }) => h("div", { className: "paste-progress-step paste-progress-step-complete" }, children), ProgressStepCurrent: ({ children }) => h("div", { className: "paste-progress-step paste-progress-step-current" }, children), ProgressStepIncomplete: ({ children }) => h("div", { className: "paste-progress-step paste-progress-step-incomplete" }, children), ProgressStepSeparator: () => h("div", { className: "paste-progress-step-separator" }), Separator: () => h("hr", { className: "paste-separator" }), Box: ({ children, ...props }) => h("div", { className: "paste-box", ...props }, children) }; // Create examples const examples = { default: h(mockComponents.PageHeader, null, h(mockComponents.PageHeaderSetting, null, h(mockComponents.Breadcrumb, null, h(mockComponents.BreadcrumbItem, { href: "#" }, "Account"), h(mockComponents.BreadcrumbItem, { href: "#" }, "Settings"), h(mockComponents.BreadcrumbItem, null, "General") ) ), h(mockComponents.PageHeaderDetails, null, h(mockComponents.PageHeaderKeyword, null, h(mockComponents.Badge, { variant: "new" }, "Beta") ), h(mockComponents.PageHeaderHeading, null, "General Settings"), h(mockComponents.PageHeaderActions, null, h(mockComponents.ButtonGroup, null, h(mockComponents.Button, { variant: "secondary" }, "Cancel"), h(mockComponents.Button, { variant: "primary" }, "Save") ) ), h(mockComponents.PageHeaderParagraph, null, "Manage your account settings and preferences.") ), h(mockComponents.PageHeaderInPageNavigation, null, h(mockComponents.InPageNavigation, null, h(mockComponents.InPageNavigationItem, { href: "#profile" }, "Profile"), h(mockComponents.InPageNavigationItem, { href: "#security" }, "Security"), h(mockComponents.InPageNavigationItem, { href: "#notifications" }, "Notifications") ) ) ), interrupted: h(mockComponents.PageHeader, null, h(mockComponents.PageHeaderSetting, null, h(mockComponents.Anchor, { href: "#" }, "← Return to Console") ), h(mockComponents.PageHeaderDetails, null, h(mockComponents.PageHeaderHeading, null, "Twilio Functions"), h(mockComponents.PageHeaderParagraph, null, "Build and deploy serverless functions.") ) ), compact: h(mockComponents.PageHeader, { size: "compact" }, h(mockComponents.PageHeaderDetails, null, h(mockComponents.PageHeaderPrefix, null, h(mockComponents.Avatar, { name: "John Doe", size: "sizeIcon60" }) ), h(mockComponents.PageHeaderHeading, { as: "h2" }, "John Doe"), h(mockComponents.PageHeaderMeta, null, h(mockComponents.StatusBadge, { variant: "success" }, "Online") ), h(mockComponents.PageHeaderActions, null, h(mockComponents.Button, { variant: "secondary", size: "small" }, "Edit") ) ) ), objectDetails: h(mockComponents.PageHeader, null, h(mockComponents.PageHeaderSetting, null, h(mockComponents.Breadcrumb, null, h(mockComponents.BreadcrumbItem, { href: "#" }, "Phone Numbers"), h(mockComponents.BreadcrumbItem, null, "+1 555 123 4567") ) ), h(mockComponents.PageHeaderDetails, null, h(mockComponents.PageHeaderHeading, null, "+1 555 123 4567"), h(mockComponents.PageHeaderMeta, null, h(mockComponents.StatusBadge, { variant: "success" }, "Active") ), h(mockComponents.PageHeaderActions, null, h(mockComponents.ButtonGroup, null, h(mockComponents.Button, { variant: "secondary" }, "Configure"), h(mockComponents.Button, { variant: "destructive" }, "Release") ) ) ) ), objectsList: h(mockComponents.PageHeader, null, h(mockComponents.PageHeaderSetting, null, h(mockComponents.Breadcrumb, null, h(mockComponents.BreadcrumbItem, { href: "#" }, "Console"), h(mockComponents.BreadcrumbItem, null, "Phone Numbers") ) ), h(mockComponents.PageHeaderDetails, null, h(mockComponents.PageHeaderHeading, null, "Phone Numbers"), h(mockComponents.PageHeaderActions, null, h(mockComponents.Button, { variant: "primary" }, "Buy a number") ), h(mockComponents.PageHeaderParagraph, null, "Manage your Twilio phone numbers.") ) ), settings: h(mockComponents.PageHeader, null, h(mockComponents.PageHeaderSetting, null, h(mockComponents.Breadcrumb, null, h(mockComponents.BreadcrumbItem, { href: "#" }, "Console"), h(mockComponents.BreadcrumbItem, null, "Settings") ) ), h(mockComponents.PageHeaderDetails, null, h(mockComponents.PageHeaderHeading, null, "Account Settings"), h(mockComponents.PageHeaderParagraph, null, "Manage your account configuration and preferences.") ), h(mockComponents.PageHeaderInPageNavigation, null, h(mockComponents.InPageNavigation, null, h(mockComponents.InPageNavigationItem, { href: "#general" }, "General"), h(mockComponents.InPageNavigationItem, { href: "#billing" }, "Billing"), h(mockComponents.InPageNavigationItem, { href: "#usage" }, "Usage") ) ) ), wizard: h(mockComponents.PageHeader, null, h(mockComponents.PageHeaderSetting, null, h(mockComponents.ProgressSteps, null, h(mockComponents.ProgressStepComplete, null, "Setup"), h(mockComponents.ProgressStepSeparator), h(mockComponents.ProgressStepCurrent, null, "Configure"), h(mockComponents.ProgressStepSeparator), h(mockComponents.ProgressStepIncomplete, null, "Review") ) ), h(mockComponents.PageHeaderDetails, null, h(mockComponents.PageHeaderKeyword, null, "Step 2 of 3"), h(mockComponents.PageHeaderHeading, null, "Configure your service"), h(mockComponents.PageHeaderParagraph, null, "Set up the basic configuration for your new service.") ) ) }; // Render examples Object.entries(examples).forEach(([key, component]) => { const container = document.getElementById(`${key === "default" ? "default" : key.replace(/([A-Z])/g, "-$1").toLowerCase()}-example`); if (container) { container.innerHTML = ""; container.appendChild(component); } }); </script> <style> /* Paste-like styling */ .paste-page-header { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; } .paste-page-header-setting { display: flex; align-items: center; } .paste-page-header-details { display: flex; flex-direction: column; gap: 8px; } .paste-page-header-heading { font-size: 28px; font-weight: 600; margin: 0; color: #121c2d; line-height: 1.2; } .paste-page-header-actions { display: flex; gap: 8px; margin-top: 8px; } .paste-page-header-paragraph { color: #606b85; margin: 0; line-height: 1.5; } .paste-page-header-meta { display: flex; align-items: center; gap: 8px; color: #606b85; font-size: 14px; } .paste-page-header-keyword { color: #606b85; font-size: 14px; margin-bottom: 4px; } .paste-page-header-prefix { display: inline-flex; margin-right: 12px; } .paste-breadcrumb { display: flex; align-items: center; gap: 8px; } .paste-breadcrumb-item { color: #0263e0; text-decoration: none; font-size: 14px; } .paste-breadcrumb-item:hover { text-decoration: underline; } .paste-breadcrumb-item:not(:last-child)::after { content: "/"; margin-left: 8px; color: #606b85; } .paste-button { padding: 8px 16px; border-radius: 4px; border: 1px solid; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; } .paste-button-primary { background-color: #0263e0; border-color: #0263e0; color: white; } .paste-button-secondary { background-color: white; border-color: #8891aa; color: #121c2d; } .paste-button-destructive { background-color: #d61f69; border-color: #d61f69; color: white; } .paste-button-small { padding: 4px 12px; font-size: 12px; } .paste-button-group { display: flex; gap: 8px; } .paste-badge { padding: 2px 8px; border-radius: 12px; font-size: 12px; font-weight: 600; background-color: #e1e3ea; color: #121c2d; } .paste-badge-new { background-color: #0263e0; color: white; } .paste-status-badge { padding: 2px 8px; border-radius: 12px; font-size: 12px; font-weight: 600; } .paste-status-badge-success { background-color: #14b8a6; color: white; } .paste-in-page-nav { border-bottom: 1px solid #e1e3ea; } .paste-in-page-nav-item { display: inline-block; padding: 12px 16px; color: #606b85; text-decoration: none; border-bottom: 2px solid transparent; } .paste-in-page-nav-item:hover { color: #0263e0; border-bottom-color: #0263e0; } .paste-anchor { color: #0263e0; text-decoration: none; } .paste-anchor:hover { text-decoration: underline; } .paste-avatar { width: 32px; height: 32px; border-radius: 50%; background-color: #0263e0; color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; } .paste-progress-steps { display: flex; align-items: center; gap: 16px; } .paste-progress-step { padding: 8px 16px; border-radius: 4px; font-size: 14px; font-weight: 600; } .paste-progress-step-complete { background-color: #14b8a6; color: white; } .paste-progress-step-current { background-color: #0263e0; color: white; } .paste-progress-step-incomplete { background-color: #e1e3ea; color: #606b85; } .paste-progress-step-separator { width: 24px; height: 2px; background-color: #e1e3ea; } .paste-separator { border: none; height: 1px; background-color: #e1e3ea; margin: 16px 0; } </style></body></html>' width="100%" height="2000" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">