Create a Component from an SLDS Blueprint
If you can’t find a base component for your use case, find the closest SLDS blueprint to help you build your own custom component.
First, we assume that you’ve exhausted the list of available base components in the Component Reference and you can’t customize the styles on a base component with styling hooks to meet your requirements.
To build a component from an SLDS blueprint, search the SLDS blueprints catalog to find the closest design for your component. If an SLDS blueprint has a corresponding base component, it has a Lightning Component button (1) in the top-right of the page. Each blueprint provides details for its device support (2)—adaptive, responsive, or desktop-only. An adaptive blueprint has markup for non-desktop breakpoints, while a responsive blueprint scales elegantly across screen sizes.
Although base components implement SLDS styling, not all base components are supported for mobile screens. Support is listed in the base component documentation.
For example, the Data Table SLDS blueprint is adaptive, but the
lightning-datatable base component is not mobile-ready. Also, consider the adaptive Tab SLDS blueprint where tabs become stacked on mobile screens and act as buttons. The corresponding
lightning-tabset doesn’t support this mobile behavior.
Let’s say you want to create a scoped notification, and you know there isn’t a corresponding Lightning web component for it. Start with the base variation on the SLDS blueprint and build up from there. First, copy and paste the responsive base variation markup into your template.
The notification includes an
svg icon in the
<div class="slds-media__figure"> tag. Replace the icon with the
lightning-icon base component.
message property to your template.
The scoped notification blueprint includes different themes—light and dark—that you want to capture in your component. Use a getter function to return the class names for a chosen theme.
The icon style changes when the theme is changed. The dark theme uses the inverse variant. Add a getter to return the correct variant.
Update the markup so it adapts based on the theme you use. Revise this static markup from the blueprint to use the dynamic styling.
Bind the class in the template to the
Similarly, bind the
lightning-icon variant attribute to the
Your component is ready for action. You can use it in another component or include it on a page in Lightning App Builder.
This example uses the
c-scoped-notification component in another Lightning web component. The
lightning-layout example provides a responsive grid layout, and
lightning-tabset corresponds to the Tabs SLDS blueprint.
Since we specify
small-device-size="9", the content in the first
lightning-layout-item takes up 75% of the screen width on a tablet or desktop (480 px or more responsive breakpoint). When viewed on a mobile device,
size="12" adjusts the content to take up 100% of the screen width. See Creating Responsive Layouts.