Page Headers
- HTML/CSS:Dev Ready
- Layout:Adaptive
Sections
OpportunitiesRecently Viewed
10 items • Updated 13 minutes ago
About Page header#
The Page Header uses the .slds-page-header
class as a base and is comprised of multiple components including the Title of the page and supporting details. For large form factors, it may include actions.
Base#
Rohde Corp - 80,000 Widgets
Mark Jaeckal • Unlimited Customer • 11/13/15
<div class="slds-page-header">
<div class="slds-page-header__row">
<div class="slds-page-header__col-title">
<div class="slds-media">
Object Home#
OpportunitiesRecently Viewed
10 items • Updated 13 minutes ago
<div class="slds-page-header">
<div class="slds-page-header__row">
<div class="slds-page-header__col-title">
<div class="slds-media">
The title for the Object Home page header is a filtering component. The .slds-text-focus
class is placed on the media object that contains the title and down icon to simulate a hover and focus state of a link.
This component is created entirely of existing components like buttons, button groups, and icons.
Examples#
With extra long name#
OpportunitiesRecently Viewed listssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
10 items • Updated 13 minutes ago
<div class="slds-page-header">
<div class="slds-page-header__row">
<div class="slds-page-header__col-title">
<div class="slds-media">
Inside a card#
<article class="slds-card">
<div class="slds-page-header">
<div class="slds-page-header__row">
<div class="slds-page-header__col-title">
Inside a tabs card#
OpportunitiesRecently Viewed
10 items • Updated 13 minutes ago
<div class="slds-tabs_card">
<div class="slds-page-header">
<div class="slds-page-header__row">
<div class="slds-page-header__col-title">
Record Home#
OpportunityAcme - 1,200 Widgets
- Field 1Description that demonstrates truncation with a long text field.
- Field 2 (3)Multiple Values
- Field 3
- Field 4Description (2-line truncati...
<div class="slds-page-header slds-page-header_record-home">
<div class="slds-page-header__row">
<div class="slds-page-header__col-title">
<div class="slds-media">
Page header record home contains up to four compact layout fields. They're contained in the .slds-page-header__detail-row
div. That div contains the top and bottom spacing needed for this version of the page header.
When text is truncated, the full text should be placed in a tooltip on hover (currently shown in the title attribute). One line truncation is created by using the .slds-truncate
class. Two line truncation must be achieved using JavaScript.
The page header is located at the top of every record home. It includes the record title and compact layout for a record. Excluding the title, the page header displays 4 compact layout fields. Similar data types can be rolled up and be displayed as a single field.
Record Title
- Display Record Type icon to the left of the title
- Record Type is displayed above the title
- When required, follow action is displayed to the right of the record title
- Display one line of text, truncate when the length conflicts with the page level actions
As shown in Field 3, web addresses and email addresses should be parsed and displayed as hyperlinks linking to the appropriate mailto:
or web url. Do not modify the user's input, display as intended.
When text is truncated, display full field text in browser tooltip on hover.
Display addresses in two lines. Street address on first line, City, State and Postal Code on line 2. For lengthy addresses, truncate each line individually based on the available width of the area using the .slds-truncate
class. Display the full address via browser tooltip.
Record Home Vertical#
Burlington Textile Weaving Plant Generator
- Account Name
- Address (2)1 Market StSan Francisco, CA 94105
- Close Date11/1/2018
- Opportunity Owner
- Amount$375,000.00
<div class="demo-only" style="width:300px">
<div class="slds-page-header slds-page-header_vertical">
<div class="slds-media">
<div class="slds-media__figure">
Vertical page header record home contains up to seven compact layout fields. They're contained in the .slds-page-header__detail-row
div.
The heading does not truncate. This is typically used in more compact layouts where more vertical space is desired.
Related List#
Contacts (will truncate)
10 items • sorted by name
<div class="slds-page-header slds-page-header_related-list">
<div class="slds-page-header__row">
<div class="slds-page-header__col-title">
<nav role="navigation" aria-label="Breadcrumbs">
The Related List page header is similar to the Object Home page header. It includes a breadcrumb component at the top and the title is truncated.
Overview of CSS Classes#
- Selector
- The CSS class being referred to.
- Summary
- A description of what the class does.
- Support
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- Restrict
- The selector that the class name is allowed to be used on.
- Variant
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- Modifier
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.
Selector | .slds-page-header |
---|---|
Summary | Initializes page header |
Support | dev-ready |
Restrict | div |
Variant | True |
Selector | .slds-page-header__row |
---|---|
Summary | Used for creating rows in a page header |
Restrict | .slds-page-header div |
Selector | .slds-page-header__row_gutters |
---|---|
Summary | Used to create rows with gutters in the page header |
Restrict | .slds-page-header__row |
Selector | .slds-page-header__col_title |
---|---|
Summary | Used to create a column containing the page title |
Restrict | .slds-page-header__row |
Selector | .slds-page-header__col_actions |
---|---|
Summary | Used to create a column containing the page actions |
Restrict | .slds-page-header__row |
Selector | .slds-page-header__col_meta |
---|---|
Summary | Used to create a column containing the page meta data |
Restrict | .slds-page-header__row |
Selector | .slds-page-header__col_controls |
---|---|
Summary | Used to create a column containing the page controls |
Restrict | .slds-page-header__row |
Selector | .slds-page-header__col_controls |
---|---|
Summary | Used to create a column containing the page record details |
Restrict | .slds-page-header__row |
Selector | .slds-page-header__name |
---|---|
Summary | Holds all the elements that make up the overall page name |
Restrict | .slds-page-header div |
Selector | .slds-page-header__name-title |
---|---|
Summary | Used to contain the page name title |
Restrict | .slds-page-header__name div |
Selector | .slds-page-header__name-switcher |
---|---|
Summary | Used to position the list view switcher |
Restrict | .slds-page-header__name div |
Selector | .slds-page-header__name-meta |
---|---|
Summary | Used to display the meta-text related to the page name |
Restrict | .slds-page-header p |
Selector | .slds-page-header__meta-text |
---|---|
Summary | Contains the page header meta text |
Restrict | .slds-page-header p |
Selector | .slds-page-header__title |
---|---|
Summary | |
Restrict | .slds-page-header h1 span |
Selector | .slds-page-header__controls |
---|---|
Summary | Used to create a row of page header controls |
Restrict | .slds-page-header div |
Selector | .slds-page-header__control |
---|---|
Summary | Used to create spacing between each page header control |
Restrict | .slds-page-header div |
Selector | .slds-page-header_object-home |
---|---|
Summary | Initializes object home page header |
Support | dev-ready |
Restrict | .slds-page-header |
Variant | True |
Selector | .slds-page-header_vertical |
---|---|
Summary | Initializes vertical page header |
Support | dev-ready |
Restrict | .slds-page-header |
Variant | True |
Selector | .slds-page-header__detail-list |
---|---|
Summary | Vertical list of detail items |
Restrict | .slds-page-header_vertical ul |
Selector | .slds-page-header__detail-item |
---|---|
Summary | List items of vertical detail list |
Restrict | .slds-page-header__detail-list li |
Selector | .slds-page-header_record-home |
---|---|
Summary | Bottom section containing record details |
Support | dev-ready |
Restrict | .slds-page-header |
Variant | True |
Selector | .slds-page-header__detail-row |
---|---|
Summary | Creates margins around the detail section of record home |
Restrict | .slds-page-header ul |
Selector | .slds-page-header__detail-block |
---|---|
Summary | Creates margins around the detail section of record home |
Restrict | .slds-page-header__detail-row li |
Selector | .slds-page-header_related-list |
---|---|
Summary | Initializes Related List home page header |
Support | dev-ready |
Restrict | .slds-page-header |
Variant | True |
Page Headers Release Notes
2.8.0
Changed
- Update padding for
slds-page-header
to use directionally aware variable spacing tokens. - Update Record Home margins on
slds-page-header__detail-row
to correctly use directionally aware variable spacing tokens.
2.7.1
Changed
- Reduce font-size of
slds-page-header__title
to 18px
2.7.0
Added
- Added
slds-page-header_record-home
class to be used within a record home page. This class utilizes variable font tokens to respond to a user's densification setting. - Made Related Lists Page Header visible, so you can see it. Yay! 🎉
- Added the following classes:
- For layout:
slds-page-header__row
,slds-page-header__row_gutters
,slds-page-header__col-title
,slds-page-header__col-actions
,slds-page-header__col-meta
,slds-page-header__col-controls
,slds-page-header__col-details
- For the page name:
slds-page-header__name
,slds-page-header__name-title
,slds-page-header__name-switcher
,slds-page-header__name-meta
,slds-page-header__meta-text
- For header controls
slds-page-header__controls
,slds-page-header__control
,
- For record home
slds-page-header_record-home
- For record home details
slds-page-header__detail-row
,slds-page-header__detail-block
- For vertical record home list
slds-page-header__detail-list
,slds-page-header__detail-item
- For layout:
Changed
- Replaced spacing tokens with variable spacing tokens to respond to a user's densification setting
- Changed dimension of
slds-page-header__icon
to be 36x36 - Pretty much all of it in a sizable refactor of the markup
- Made it easier to componentize the page headers and share code between the different variants
- Made page headers less reliant on utility classes
- Please see above for added class names
Deprecated
- Deprecated page header specific spacing tokens
- PAGE_HEADER_SPACING_MARGIN
- PAGE_HEADER_SPACING_PADDING
- PAGE_HEADER_SPACING_ROW