Illustration Size Classes
A group of class names to change the size of an illustration SVG.
Usage
Add [namespace]-illustration[modifier] to the base [namespace]-illustration class, e.g. class="slb-illustration slb-illustration--lg"
Accessible attributes
| Accessible attribute | Description |
|---|---|
aria-hidden="true" |
When an illustration is used for only decorative purposes add this attribute to the illustration's tag. |
Modifier selectors
| Modifier selector | Description |
|---|---|
slb-illustration--xs |
Extra small illustration with a height and width of 30px. |
slb-illustration--sm |
Small illustration with a height and width of 50px. |
slb-illustration |
Default illustration with a height and width of 100px. |
slb-illustration--lg |
Large illustration with a height and width of 150px. |
slb-illustration--xl |
Extra large illustration with a height and width of 200px. |
.slb-illustration--xs - Extra small illustration size.
.slb-illustration--sm - Small illustration size.
.slb-illustration - Default size of the illustration.
.slb-illustration--lg - Large size of the illustration.
.slb-illustration--xl - Extra large size of the illustration.