Visual Picker

visual-picker

.slds-visual-picker, .slds-box_link

coverable-content

.slds-visual-picker — Initializes a visual picker component

coverable-content › Small base

coverable-content › Medium (default) base

coverable-content › Large base

coverable-content › Small base with checkboxes

coverable-content › Medium base with checkboxes

coverable-content › Large base with checkboxes

.slds-visual-picker__figure

.slds-visual-picker__figure — Visual container for icon and text

not-selected

.slds-is-not-selected — Non-selected state

selected

.slds-is-selected — Selected state

.slds-visual-picker__icon

.slds-visual-picker__icon — Icon within visual picker

.slds-visual-picker__text

.slds-visual-picker__text — Text within visual picker

medium

.slds-visual-picker_medium — Size modifier to adjust to the default size of medium

large

.slds-visual-picker_large — Size modifier to adjust to the size of large

small

.slds-visual-picker_small — Size modifier to adjust to the size of small

.slds-visual-picker__body

.slds-visual-picker__body — Text area that sits outside the visual picker

non-coverable-content

.slds-visual-picker__text-check — Checkmark that is visibily toggled when input is checked

vertical

.slds-visual-picker_vertical — Initializes a vertical visual picker component

link

.slds-box_link — Checkmark that is visibily toggled when input is checked