Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur
Component Blueprints
Illustration
- HTML/CSS:Dev Ready
- Layout:Desktop Only
Sections
information
You are currently viewing a sandbox preview version of Spring ’20 | Go back to Summer ’20
An illustration is an image and inline text that work in tandem to communicate a state in a more friendly way.
Lorem ipsum dolor
About Illustration#
Illustrations should be used within other components, such as cards, to express the state of the component. An illustration image must be accompanied with heading text inline.
Accessibility#
Each SVG tag requires an aria-hidden="true" attribute.
<svg viewBox="0 0 483 218" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">...</svg>Base#
Lorem ipsum dolor
<div class="slds-illustration slds-illustration_small">
<svg class="slds-illustration__svg" viewBox="0 0 466 297" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-69.000000, -68.000000)">Using Empty States#
Empty states are used when an element doesn’t have content to display to the user. An empty state is an opportunity to engage and delight users. The empty state should tell users what it’s for and why they’re seeing it. Effective empty states also tell users what they can do next. Illustrations should show data or system state (empty for instance), but not user input validation messaging.
Empty states have many causes, such as:
- There’s no data the user can see.
- A feature hasn’t been configured yet.
- There’s been an error.
- Empty area of the screen intentionally left blank.
Use empty states to:
- Prevent the application from feeling lifeless and empty.
- Help users onboard an application and/or motivate them to interact with the application.
- Warn the user when data is unavailable (because of a system error or otherwise).
With Message Body#
Illustrations can include message body text below the heading to further communicate the state of the component. However, illustrations cannot have a message body without heading text.
Design Note
To ensure the readability of your text, we recommend limiting each line to 66 characters.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur
<div class="slds-illustration slds-illustration_small">
<svg class="slds-illustration__svg" viewBox="0 0 466 297" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-69.000000, -68.000000)">Large Illustrations#
The base illustration component is typically used within smaller components and has a max-width of 300px and a max-height of 200px. However, there are some cases where it can be used in a larger context.
For these situations, utilize the modifier .slds-illustration_large. This will increase the max-width of the image to 600px and the max-height to 400px.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur
<div class="slds-illustration slds-illustration_large">
<svg class="slds-illustration__svg" viewBox="0 0 466 297" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-69.000000, -68.000000)">Informational#
Common Scenarios:
- Setup needed
- Maintenance
Going Camping#
Lorem ipsum dolor
<div class="slds-illustration slds-illustration_small">
<svg class="slds-illustration__svg" viewBox="0 0 483 218" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-64.000000, -98.000000)">Maintenance#
Lorem ipsum dolor
<div class="slds-illustration slds-illustration_small">
<svg class="slds-illustration__svg" viewBox="0 0 364 277" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-119.000000, -71.000000)">No Data#
Common Scenarios:
- No data/information
- No history/feeds
Desert#
Lorem ipsum dolor
<div class="slds-illustration slds-illustration_small">
<svg class="slds-illustration__svg" viewBox="0 0 468 194" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-67.000000, -112.000000)">Open Road#
Lorem ipsum dolor
<div class="slds-illustration slds-illustration_small">
<svg class="slds-illustration__svg" viewBox="0 0 454 272" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g fill="none" fill-rule="evenodd" transform="translate(-65 -74)">
<g transform="translate(77 180)">Error#
Common Scenarios:
- No access to a page
- No connection
- Page not available in Lightning
- Page not available
- Walkthrough not available
No Access#
Lorem ipsum dolor
<div class="slds-illustration slds-illustration_small">
<svg class="slds-illustration__svg" viewBox="0 0 454 212" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-70.000000, -95.000000)">No Connection#
Lorem ipsum dolor
<div class="slds-illustration slds-illustration_small">
<svg class="slds-illustration__svg" viewBox="0 0 454 265" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-77.000000, -60.000000)">Not Available In Lightning#
Lorem ipsum dolor
<div class="slds-illustration slds-illustration_small">
<svg class="slds-illustration__svg" viewBox="0 0 470 267" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-65.000000, -66.000000)">Page Not Available#
Lorem ipsum dolor
<div class="slds-illustration slds-illustration_small">
<svg class="slds-illustration__svg" viewBox="0 0 470 229" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-65.000000, -89.000000)">Walkthrough Not Available#
Lorem ipsum dolor
<div class="slds-illustration slds-illustration_small">
<svg class="slds-illustration__svg" viewBox="0 0 424 253" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-90.000000, -75.000000)">Custom#
Fishing Deals#
Lorem ipsum dolor
<div class="slds-illustration slds-illustration_small">
<svg class="slds-illustration__svg" viewBox="0 0 466 297" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-69.000000, -68.000000)">Lake Mountain#
Lorem ipsum dolor
<div class="slds-illustration slds-illustration_small">
<svg class="slds-illustration__svg" viewBox="0 0 505 319" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-48.000000, -60.000000)">No Events#
Lorem ipsum dolor
<div class="slds-illustration slds-illustration_small">
<svg class="slds-illustration__svg" viewBox="0 0 396 237" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-102.000000, -79.000000)">No Task#
Lorem ipsum dolor
<div class="slds-illustration slds-illustration_small">
<svg class="slds-illustration__svg" viewBox="0 0 454 182" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-73.000000, -110.000000)">Setup#
Lorem ipsum dolor
<div class="slds-illustration slds-illustration_small">
<svg class="slds-illustration__svg" viewBox="0 0 396 245" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<rect x="77" y="47" width="20" height="28"></rect>Miscellaneous#
Gone Fishing#
Lorem ipsum dolor
<div class="slds-illustration slds-illustration_small">
<svg class="slds-illustration__svg" viewBox="0 0 466 263" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-69.000000, -67.000000)">No Access 2#
Lorem ipsum dolor
<div class="slds-illustration slds-illustration_small">
<svg class="slds-illustration__svg" viewBox="0 0 454 234" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(2.000000, 2.000000)">No Content#
Lorem ipsum dolor
<div class="slds-illustration slds-illustration_small">
<svg class="slds-illustration__svg" viewBox="0 0 454 213" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-70.000000, -94.000000)">No Preview#
Lorem ipsum dolor
<div class="slds-illustration slds-illustration_small">
<svg class="slds-illustration__svg" viewBox="0 0 272 146" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-14.000000, -27.000000)">Preview#
Lorem ipsum dolor
<div class="slds-illustration slds-illustration_small">
<svg class="slds-illustration__svg" viewBox="0 0 272 146" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<circle vector-effect="non-scaling-stroke" cx="60" cy="60" r="60"></circle>Research#
Lorem ipsum dolor
<div class="slds-illustration slds-illustration_small">
<svg class="slds-illustration__svg" viewBox="0 0 493 266" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-54.000000, -75.000000)">With Call to Action#
A call to action may be used to help users move from an empty state to a situation where the page, component, or element is now useful to them.
In most cases, one call to action will be enough. When using one call to action, place the call to action below the message text.
One Call to Action - Link#
<article class="slds-card">
<div class="slds-card__header slds-grid">
<header>
<h2>One Call to Action - Button#
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur
<article class="slds-card">
<div class="slds-card__header slds-grid">
<header>
<h2>One Call to Action - Button Brand#
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur
<article class="slds-card">
<div class="slds-card__header slds-grid">
<header>
<h2>Two Calls to Action#
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur Learn More
<article class="slds-card">
<div class="slds-card__header slds-grid">
<header>
<h2>Text Only#
In certain use cases, it may be appropriate to just use text to communicate states.
Heading and Message#
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur
<div class="slds-illustration slds-illustration_small">
<div class="slds-text-longform">
<h3 class="slds-text-heading_medium">Lorem ipsum dolor</h3>
<p class="slds-text-body_regular">Lorem ipsum dolor sit amet, consectetur</p>Heading Only#
Lorem ipsum dolor
<div class="slds-illustration slds-illustration_small">
<div class="slds-text-longform">
<h3 class="slds-text-heading_medium">Lorem ipsum dolor</h3>
</div>Message Only#
When an image is not present, a message only variant may be used.
Lorem ipsum dolor sit amet, consectetur
<div class="slds-illustration slds-illustration_small">
<div class="slds-text-longform">
<p class="slds-text-body_regular">Lorem ipsum dolor sit amet, consectetur</p>
</div>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-illustration |
|---|---|
| Summary | Initiates an illustration component |
| Support | dev-ready |
| Restrict | div |
| Variant | True |
| Selector | .slds-illustration_small |
|---|---|
| Summary | Applies width and height values for small illustrations |
| Restrict | .slds-illustration |
| Modifier | True |
| Selector | .slds-illustration_large |
|---|---|
| Summary | Applies width and height values for large illustrations |
| Restrict | .slds-illustration |
| Modifier | True |
Illustration Release Notes
2.7.0
Added
- Added example for large illustrations