Page headers are used at the top of several page types. They use the. The page header is a masthead that contains the Title of the page, and supporting details. For large form factors, it may include actions.

Page header record home contains up to four compact layout fields. They're contained in the. 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. 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. 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.

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.

Notifications

Display the full address via browser tooltip. The title for the Object Home page header is sorting component. This component is created entirely of existing components like grids, buttons, button groups, and icons.

The Related List page header is similar to the Object Home page header. It includes a breadcrumb component at the top and the title c52 gearbox truncated. It is also created using multiple other components shown in the dependencies tab.

Data Tables

Base Base dev ready Preview Small Large. 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.

When text is truncated, display full field text in browser tooltip on hover. Class Name Usage. Search: type text, then use the up and down arrows to navigate results Submit your search query. Required: Required Comments: Required on the main container for the page header. Required: No, optional element or modifier Comments: Required: No, optional element or modifier Comments: Only the record home page header contains this detail area.The Salesforce Lightning Design System SLDS component library is actively developed to enable Salesforce developers to create a uniform look and feel across all Salesforce-related applications while adhering to CSS best practices and conventions.

These allow us to keep our code base flat, with low specificity, and keeps us from fighting specificity wars that start with frustration and end with! Though we base our naming on the BEM method, we have a few additions of our own outlined below.

BEM is a well-known method of naming components — block, element, modifier. A block represents the main component name. If you were building a house component, the class name would be. All of the properties you want included for all houses would be included in the base.

An element represents a part of a component and is separated by two underscores. The door of the house would be represented by the class. A window would be. Be careful to look for smaller component possibilities within a larger component.

Avoid using a class like. Instead, either use. Or if the stair portion of the component might be used inside another component, make the. A modifier is a component or element variation and is separated by a single underscore.

slds footer

The variation can apply to the overall component or it can be applied to an element within the component. Since the properties that should apply to every house are placed on the main. If there is a variation of a house — perhaps it is gray — the. If the house has a pink door, a variation can be placed on the door element itself —.

These changes are outlined below. Though BEM syntax is traditionally based off an initial block, in some cases in our utilities we have opted to remove that requirement. For example, margin and padding are indicated with the formula. So while there is no base. Our spacing utilities similarly use the syntax. Text sizing uses class names like. Though generic.By using our site, you acknowledge that you have read and understand our Cookie PolicyPrivacy Policyand our Terms of Service.

Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It only takes a minute to sign up.

I have a table with the following markup. I want the table headers to be in vertical direction. I tried adding CSS to rotate the text but it doesn't work with the inbuilt styles.

Sign up to join this community. The best answers are voted up and rise to the top. Home Questions Tags Users Unanswered. Asked 2 years, 10 months ago. Active 2 years, 10 months ago. Viewed times. Active Oldest Votes. Sign up or log in Sign up using Google. Sign up using Facebook. Sign up using Email and Password. Post as a guest Name.

Email Required, but never shown. The Overflow Blog. Featured on Meta. Feedback on Q2 Community Roadmap. Related 0. Hot Network Questions.Page headers are used at the top of several page types. They use the. The page header is a masthead that contains the Title of the page, and supporting details. For large form factors, it may include actions.

Jump to Navigation. Skip to Content. Search Submit your search query. Object Home. Record Home. Record Home Vertical. Related List. Developer Guidelines.

Fixed page header in Lightning Design System

About Base The page header is a masthead that contains the Title of the page, and supporting details. 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.

Salesforce Lightning Development class 2 - intoduction to slds

Typically these will be colors, sizing and positioning. Used to create a column containing the page record details. Holds all the elements that make up the overall page name. Used to display the meta-text related to the page name. Used to create spacing between each page header control.

Creates margins around the detail section of record home.Page headers are used at the top of several page types. They use the. The page header is a masthead that contains the Title of the page, and supporting details.

For large form factors, it may include actions. Jump to Navigation. Skip to Content. Salesforce Lightning Design System. Search Submit your search query. Object Home. Record Home. Record Home Vertical. Related List. Developer Guidelines Show Code. About Base The page header is a masthead that contains the Title of the page, and supporting details. 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.

Typically these will be colors, sizing and positioning. Used to create a column containing the page record details. Holds all the elements that make up the overall page name. Used to display the meta-text related to the page name. Used to create spacing between each page header control. Creates margins around the detail section of record home.When errors are found within a form, the user will be notified with a popover with the page-level errors listed out.

Please provide a contextually specific title for the dialog with the aria-label attribute. Jump to Navigation. Skip to Content. Submit your search query. With Error s. With Error Popover. Docked form footer is used to dock form actions to the bottom of the viewport. No content has been added for this component. About Base The popover should be positioned with JavaScript.

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.

Typically these will be colors, sizing and positioning. Creates a docked form footer.A prompt uses the base modal component and then adds the class. In the example, we illustrate using.

slds footer

The class. Prompt notifications are similar to modals, in that they are a focus trap, but they should take a slightly different role of alertdialog to indicate their severity.

Like modals they should be labelled by their headings, but additonally they should be desscribed by the message details of the prompt. There is no requirement for a close button, as the confirmation button should be used to dismiss the prompt, along with the usual Esc key dismissal. Jump to Navigation. Skip to Content. Submit your search query. No content has been added for this component. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.

Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. Cillum sunt ad dolore quis aute consequat ipsum magna exercitation reprehenderit magna. Tempor cupidatat consequat elit dolor adipisicing.

About Prompt A prompt uses the base modal component and then adds the class. Accessibility Prompt notifications are similar to modals, in that they are a focus trap, but they should take a slightly different role of alertdialog to indicate their severity. Selector The CSS class being referred to. Summary A description of what the class does.

slds footer

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. Typically these will be colors, sizing and positioning.

Initializes Prompt style notification.