Visibility
- HTML/CSS:Dev Ready
- Layout:Responsive
Specify the visibility of elements by showing and hiding. It's best practice to swap the hide and show classes rather than use them concurrently, as this will cause issues.
Visibility: Assistive Text
Preview
Assistive Text
Use the slds-assistive-text class to enable a screen reader to read text that is hidden. This class is typically used to accompany icons and other UI elements that show an image instead of text.
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-assistive-text |
|---|---|
| Summary | Hides an element yet enables a screen reader to read the element that is hidden |
| Restrict | * |
| Modifier | True |
| Selector | .slds-hide |
|---|---|
| Summary | Hides an element from the page by setting display propery to |
| Restrict | * |
| Modifier | True |
| Selector | .slds-show |
|---|---|
| Summary | Shows the element by setting display property to |
| Restrict | * |
| Modifier | True |
| Selector | .slds-show_inline-block |
|---|---|
| Summary | Shows the element by setting display to |
| Restrict | * |
| Modifier | True |
| Selector | .slds-show_inline |
|---|---|
| Summary | Shows the element by setting display to |
| Restrict | * |
| Modifier | True |
| Selector | .transition-hide |
|---|---|
| Summary | Hides an element from the page by setting the opacity property set to |
| Restrict | * |
| Modifier | True |
| Selector | .transition-show |
|---|---|
| Summary | Shows the element using the opacity property set to |
| Restrict | * |
| Modifier | True |
| Selector | .slds-hide_* |
|---|---|
| Summary | Hides the element when the window is bigger than the specific size. Sizes can be: x-small, small, medium, large, and * x-large. |
| Restrict | * |
| Modifier | True |
| Selector | .slds-show_* |
|---|---|
| Summary | Shows the element when the window is bigger than the specific size. Sizes can be: x-small, small, medium, large, and * x-large. |
| Restrict | * |
| Modifier | True |