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.

Move the message to the component’s JavaScript file and bind the 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 scopedNotificationClass getter.

Similarly, bind the lightning-icon variant attribute to the iconVariant getter.

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.