vlsuite-1.0.x-dev/modules/vlsuite_utility_classes/config/install/vlsuite_utility_classes.settings.yml
modules/vlsuite_utility_classes/config/install/vlsuite_utility_classes.settings.yml
list_unstyled_classes: list-unstyled
container_classes: container
row_classes: row
col_classes:
col_100: col-12
col_80: 'col-12 col-md-10'
col_75: 'col-12 col-md-9 flex-md-grow-1'
col_67: 'col-12 col-md-8 flex-md-grow-1'
col_60: 'col-12 col-md-7'
col_50: 'col-12 col-md-6'
col_40: 'col-12 col-md-5'
col_33: 'col-12 col-md-4'
col_25: 'col-12 col-md-6 col-xl-3 flex-md-grow-1'
col_auto: mx-auto
utilities:
text-align:
apply_to:
'block_content:vlsuite_collection_cta:vlsuite_link': 'block_content:vlsuite_collection_cta:vlsuite_link'
'block_content:vlsuite_cta:vlsuite_link': 'block_content:vlsuite_cta:vlsuite_link'
'block_content:vlsuite_text:vlsuite_text': 'block_content:vlsuite_text:vlsuite_text'
'node:vlsuite_landing:field_vlsuite_landing_cta_link': 'node:vlsuite_landing:field_vlsuite_landing_cta_link'
'vlsuite_layout:row': 'vlsuite_layout:row'
'vlsuite_layout:region_top': 'vlsuite_layout:region_top'
'vlsuite_layout:main_regions': 'vlsuite_layout:main_regions'
'vlsuite_layout:region_bottom': 'vlsuite_layout:region_bottom'
visual_name: 'Text align'
class_prefix: text-
values:
left:
visual_name: Left
class_suffix: start
right:
visual_name: Right
class_suffix: end
center:
visual_name: Center
class_suffix: center
left-md-medium-or-wider:
visual_name: 'Left - MD (medium or wider)'
class_suffix: md-start
right-md-medium-or-wider:
visual_name: 'Right - MD (medium or wider)'
class_suffix: md-end
center-md-medium-or-wider:
visual_name: 'Center - MD (medium or wider)'
class_suffix: md-center
color:
apply_to:
'block_content:vlsuite_text:vlsuite_text': 'block_content:vlsuite_text:vlsuite_text'
'node:vlsuite_landing:title:item': 'node:vlsuite_landing:title:item'
'vlsuite_layout:row': 'vlsuite_layout:row'
'vlsuite_layout:region_top': 'vlsuite_layout:region_top'
'vlsuite_layout:main_regions': 'vlsuite_layout:main_regions'
'vlsuite_layout:region_bottom': 'vlsuite_layout:region_bottom'
visual_name: 'Text color'
class_prefix: text-
values:
primary:
visual_name: Primary
class_suffix: primary
secondary:
visual_name: Secondary
class_suffix: secondary
success:
visual_name: Success
class_suffix: success
info:
visual_name: Info
class_suffix: info
warning:
visual_name: Warning
class_suffix: warning
danger:
visual_name: Danger
class_suffix: danger
light:
visual_name: Light
class_suffix: light
dark:
visual_name: Dark
class_suffix: dark
white:
visual_name: White
class_suffix: white
body:
visual_name: Body
class_suffix: body
muted:
visual_name: Muted
class_suffix: muted
black-50:
visual_name: 'Black 50'
class_suffix: black-50
white-50:
visual_name: 'White 50'
class_suffix: white-50
reset:
visual_name: Reset
class_suffix: reset
background-color:
apply_to:
'block_content:vlsuite_text:vlsuite_text': 'block_content:vlsuite_text:vlsuite_text'
'vlsuite_layout:section': 'vlsuite_layout:section'
'vlsuite_layout:main_regions': 'vlsuite_layout:main_regions'
visual_name: 'Background color'
class_prefix: bg-
values:
primary:
visual_name: Primary
class_suffix: primary
secondary:
visual_name: Secondary
class_suffix: secondary
success:
visual_name: Success
class_suffix: success
info:
visual_name: Info
class_suffix: info
warning:
visual_name: Warning
class_suffix: warning
danger:
visual_name: Danger
class_suffix: danger
light:
visual_name: Light
class_suffix: light
dark:
visual_name: Dark
class_suffix: dark
body:
visual_name: Body
class_suffix: body
white:
visual_name: White
class_suffix: white
transparent:
visual_name: Transparent
class_suffix: transparent
background-gradient:
apply_to:
'block_content:vlsuite_text:vlsuite_text': 'block_content:vlsuite_text:vlsuite_text'
'vlsuite_layout:section': 'vlsuite_layout:section'
'vlsuite_layout:main_regions': 'vlsuite_layout:main_regions'
visual_name: 'Background gradient'
class_prefix: 'bg-gradient bg-'
values:
primary:
visual_name: Primary
class_suffix: primary
secondary:
visual_name: Secondary
class_suffix: secondary
success:
visual_name: Success
class_suffix: success
info:
visual_name: Info
class_suffix: info
warning:
visual_name: Warning
class_suffix: warning
danger:
visual_name: Danger
class_suffix: danger
light:
visual_name: Light
class_suffix: light
dark:
visual_name: Dark
class_suffix: dark
body:
visual_name: Body
class_suffix: body
white:
visual_name: White
class_suffix: white
transparent:
visual_name: Transparent
class_suffix: transparent
background-opacity:
apply_to:
'block_content:vlsuite_text:vlsuite_text': 'block_content:vlsuite_text:vlsuite_text'
'vlsuite_layout:section': 'vlsuite_layout:section'
'vlsuite_layout:main_regions': 'vlsuite_layout:main_regions'
visual_name: 'Background opacity'
class_prefix: bg-opacity-
values:
75:
visual_name: 75%
class_suffix: '75'
50:
visual_name: 50%
class_suffix: '50'
25:
visual_name: 25%
class_suffix: '25'
10:
visual_name: 10%
class_suffix: '10'
gutter:
apply_to:
'vlsuite_layout:row': 'vlsuite_layout:row'
visual_name: Gutter
class_prefix: g-
values:
no-gutter:
visual_name: 'No gutter'
class_suffix: '0'
gutter-1:
visual_name: 'Gutter 1'
class_suffix: '1'
gutter-2:
visual_name: 'Gutter 2'
class_suffix: '2'
gutter-3:
visual_name: 'Gutter 3'
class_suffix: '3'
gutter-4:
visual_name: 'Gutter 4'
class_suffix: '4'
gutter-5:
visual_name: 'Gutter 5'
class_suffix: '5'
no-gutter-md-medium-or-wider:
visual_name: 'No gutter - MD (medium or wider)'
class_suffix: md-0
gutter-1-md-medium-or-wider:
visual_name: 'Gutter 1 - MD (medium or wider)'
class_suffix: md-1
gutter-2-md-medium-or-wider:
visual_name: 'Gutter 2 - MD (medium or wider)'
class_suffix: md-2
gutter-3-md-medium-or-wider:
visual_name: 'Gutter 3 - MD (medium or wider)'
class_suffix: md-3
gutter-4-md-medium-or-wider:
visual_name: 'Gutter 4 - MD (medium or wider)'
class_suffix: md-4
gutter-5-md-medium-or-wider:
visual_name: 'Gutter 5 - MD (medium or wider)'
class_suffix: md-5
gutter-y:
apply_to:
'vlsuite_layout:row': 'vlsuite_layout:row'
visual_name: 'Vertical gutter'
class_prefix: gy-
values:
no-gutter:
visual_name: 'No gutter'
class_suffix: '0'
gutter-1:
visual_name: 'Gutter 1'
class_suffix: '1'
gutter-2:
visual_name: 'Gutter 2'
class_suffix: '2'
gutter-3:
visual_name: 'Gutter 3'
class_suffix: '3'
gutter-4:
visual_name: 'Gutter 4'
class_suffix: '4'
gutter-5:
visual_name: 'Gutter 5'
class_suffix: '5'
no-gutter-md-medium-or-wider:
visual_name: 'No gutter - MD (medium or wider)'
class_suffix: md-0
gutter-1-md-medium-or-wider:
visual_name: 'Gutter 1 - MD (medium or wider)'
class_suffix: md-1
gutter-2-md-medium-or-wider:
visual_name: 'Gutter 2 - MD (medium or wider)'
class_suffix: md-2
gutter-3-md-medium-or-wider:
visual_name: 'Gutter 3 - MD (medium or wider)'
class_suffix: md-3
gutter-4-md-medium-or-wider:
visual_name: 'Gutter 4 - MD (medium or wider)'
class_suffix: md-4
gutter-5-md-medium-or-wider:
visual_name: 'Gutter 5 - MD (medium or wider)'
class_suffix: md-5
gutter-x:
apply_to:
'vlsuite_layout:row': 'vlsuite_layout:row'
visual_name: 'Horizontal gutter'
class_prefix: gx-
values:
no-gutter:
visual_name: 'No gutter'
class_suffix: '0'
gutter-1:
visual_name: 'Gutter 1'
class_suffix: '1'
gutter-2:
visual_name: 'Gutter 2'
class_suffix: '2'
gutter-3:
visual_name: 'Gutter 3'
class_suffix: '3'
gutter-4:
visual_name: 'Gutter 4'
class_suffix: '4'
gutter-5:
visual_name: 'Gutter 5'
class_suffix: '5'
no-gutter-md-medium-or-wider:
visual_name: 'No gutter - MD (medium or wider)'
class_suffix: md-0
gutter-1-md-medium-or-wider:
visual_name: 'Gutter 1 - MD (medium or wider)'
class_suffix: md-1
gutter-2-md-medium-or-wider:
visual_name: 'Gutter 2 - MD (medium or wider)'
class_suffix: md-2
gutter-3-md-medium-or-wider:
visual_name: 'Gutter 3 - MD (medium or wider)'
class_suffix: md-3
gutter-4-md-medium-or-wider:
visual_name: 'Gutter 4 - MD (medium or wider)'
class_suffix: md-4
gutter-5-md-medium-or-wider:
visual_name: 'Gutter 5 - MD (medium or wider)'
class_suffix: md-5
align-items:
apply_to:
'vlsuite_layout:row': 'vlsuite_layout:row'
visual_name: 'Align items (vertical)'
class_prefix: align-items-
values:
start:
visual_name: Start
class_suffix: start
end:
visual_name: End
class_suffix: end
center:
visual_name: Center
class_suffix: center
baseline:
visual_name: Baseline
class_suffix: baseline
padding:
apply_to:
'block_content:vlsuite_collection_cta:vlsuite_link': 'block_content:vlsuite_collection_cta:vlsuite_link'
'block_content:vlsuite_collection_cta:vlsuite_text': 'block_content:vlsuite_collection_cta:vlsuite_text'
'block_content:vlsuite_text:vlsuite_text': 'block_content:vlsuite_text:vlsuite_text'
'vlsuite_layout:section': 'vlsuite_layout:section'
'vlsuite_layout:main_regions': 'vlsuite_layout:main_regions'
'vlsuite_layout:region_bottom': 'vlsuite_layout:region_bottom'
visual_name: Spacing
class_prefix: p-
values:
no-spacer:
visual_name: 'No spacing'
class_suffix: '0'
spacer-1:
visual_name: 'Spacer 1'
class_suffix: '1'
spacer-2:
visual_name: 'Spacer 2'
class_suffix: '2'
spacer-3:
visual_name: 'Spacer 3'
class_suffix: '3'
spacer-4:
visual_name: 'Spacer 4'
class_suffix: '4'
spacer-5:
visual_name: 'Spacer 5'
class_suffix: '5'
spacer-1-md-medium-or-wider:
visual_name: 'Spacer 1 - MD (medium or wider)'
class_suffix: md-1
spacer-2-md-medium-or-wider:
visual_name: 'Spacer 2 - MD (medium or wider)'
class_suffix: md-2
spacer-3-md-medium-or-wider:
visual_name: 'Spacer 3 - MD (medium or wider)'
class_suffix: md-3
spacer-4-md-medium-or-wider:
visual_name: 'Spacer 4 - MD (medium or wider)'
class_suffix: md-4
spacer-5-md-medium-or-wider:
visual_name: 'Spacer 5 - MD (medium or wider)'
class_suffix: md-5
padding-y:
apply_to:
'block_content:vlsuite_text:vlsuite_text': 'block_content:vlsuite_text:vlsuite_text'
'vlsuite_layout:section': 'vlsuite_layout:section'
'vlsuite_layout:main_regions': 'vlsuite_layout:main_regions'
'vlsuite_layout:region_bottom': 'vlsuite_layout:region_bottom'
visual_name: 'Vertical spacing'
class_prefix: py-
values:
no-spacer:
visual_name: 'No spacing'
class_suffix: '0'
spacer-1:
visual_name: 'Spacer 1'
class_suffix: '1'
spacer-2:
visual_name: 'Spacer 2'
class_suffix: '2'
spacer-3:
visual_name: 'Spacer 3'
class_suffix: '3'
spacer-4:
visual_name: 'Spacer 4'
class_suffix: '4'
spacer-5:
visual_name: 'Spacer 5'
class_suffix: '5'
spacer-1-md-medium-or-wider:
visual_name: 'Spacer 1 - MD (medium or wider)'
class_suffix: md-1
spacer-2-md-medium-or-wider:
visual_name: 'Spacer 2 - MD (medium or wider)'
class_suffix: md-2
spacer-3-md-medium-or-wider:
visual_name: 'Spacer 3 - MD (medium or wider)'
class_suffix: md-3
spacer-4-md-medium-or-wider:
visual_name: 'Spacer 4 - MD (medium or wider)'
class_suffix: md-4
spacer-5-md-medium-or-wider:
visual_name: 'Spacer 5 - MD (medium or wider)'
class_suffix: md-5
padding-x:
apply_to:
'block_content:vlsuite_text:vlsuite_text': 'block_content:vlsuite_text:vlsuite_text'
'vlsuite_layout:section': 'vlsuite_layout:section'
'vlsuite_layout:main_regions': 'vlsuite_layout:main_regions'
'vlsuite_layout:region_bottom': 'vlsuite_layout:region_bottom'
visual_name: 'Horizontal spacing'
class_prefix: px-
values:
no-spacer:
visual_name: 'No spacing'
class_suffix: '0'
spacer-1:
visual_name: 'Spacer 1'
class_suffix: '1'
spacer-2:
visual_name: 'Spacer 2'
class_suffix: '2'
spacer-3:
visual_name: 'Spacer 3'
class_suffix: '3'
spacer-4:
visual_name: 'Spacer 4'
class_suffix: '4'
spacer-5:
visual_name: 'Spacer 5'
class_suffix: '5'
spacer-1-md-medium-or-wider:
visual_name: 'Spacer 1 - MD (medium or wider)'
class_suffix: md-1
spacer-2-md-medium-or-wider:
visual_name: 'Spacer 2 - MD (medium or wider)'
class_suffix: md-2
spacer-3-md-medium-or-wider:
visual_name: 'Spacer 3 - MD (medium or wider)'
class_suffix: md-3
spacer-4-md-medium-or-wider:
visual_name: 'Spacer 4 - MD (medium or wider)'
class_suffix: md-4
spacer-5-md-medium-or-wider:
visual_name: 'Spacer 5 - MD (medium or wider)'
class_suffix: md-5
media-bg-opacity:
apply_to:
'vlsuite_layout:media_bg': 'vlsuite_layout:media_bg'
visual_name: 'Media background opacity'
class_prefix: opacity-
values:
0:
visual_name: 0%
class_suffix: '0'
25:
visual_name: 25%
class_suffix: '25'
50:
visual_name: 50%
class_suffix: '50'
75:
visual_name: 75%
class_suffix: '75'
100:
visual_name: 100%
class_suffix: '100'
media-bg-variant:
apply_to:
'vlsuite_layout:media_bg': 'vlsuite_layout:media_bg'
visual_name: 'Media background variant'
class_prefix: media-bg-variant--
values:
half-width-left:
visual_name: 'Half width left'
class_suffix: half-width-left
half-width-right:
visual_name: 'Half width right'
class_suffix: half-width-right
btn:
apply_to:
'block_content:vlsuite_collection_cta:vlsuite_link:item': 'block_content:vlsuite_collection_cta:vlsuite_link:item'
'block_content:vlsuite_cta:vlsuite_link:item': 'block_content:vlsuite_cta:vlsuite_link:item'
'node:vlsuite_landing:field_vlsuite_landing_cta_link:item': 'node:vlsuite_landing:field_vlsuite_landing_cta_link:item'
visual_name: Button
class_prefix: 'btn btn-'
values:
primary:
visual_name: Primary
class_suffix: primary
secondary:
visual_name: Secondary
class_suffix: secondary
success:
visual_name: Success
class_suffix: success
info:
visual_name: Info
class_suffix: info
warning:
visual_name: Warning
class_suffix: warning
danger:
visual_name: Danger
class_suffix: danger
light:
visual_name: Light
class_suffix: light
dark:
visual_name: Dark
class_suffix: dark
outline-primary:
visual_name: 'Outline Primary'
class_suffix: outline-primary
outline-secondary:
visual_name: 'Outline Secondary'
class_suffix: outline-secondary
outline-success:
visual_name: 'Outline Success'
class_suffix: outline-success
outline-info:
visual_name: 'Outline Info'
class_suffix: outline-info
outline-warning:
visual_name: 'Outline Warning'
class_suffix: outline-warning
outline-danger:
visual_name: 'Outline Danger'
class_suffix: outline-danger
outline-light:
visual_name: 'Outline Light'
class_suffix: outline-light
outline-dark:
visual_name: 'Outline Dark'
class_suffix: outline-dark
btn-size:
apply_to:
'block_content:vlsuite_collection_cta:vlsuite_link:item': 'block_content:vlsuite_collection_cta:vlsuite_link:item'
'block_content:vlsuite_cta:vlsuite_link:item': 'block_content:vlsuite_cta:vlsuite_link:item'
'node:vlsuite_landing:field_vlsuite_landing_cta_link:item': 'node:vlsuite_landing:field_vlsuite_landing_cta_link:item'
visual_name: 'Button size'
class_prefix: btn-
values:
large:
visual_name: Large
class_suffix: lg
small:
visual_name: Small
class_suffix: sm
rounded:
apply_to:
'block_content:vlsuite_collection_cta:vlsuite_link:item': 'block_content:vlsuite_collection_cta:vlsuite_link:item'
'block_content:vlsuite_collection_cta:vlsuite_image:item': 'block_content:vlsuite_collection_cta:vlsuite_image:item'
'block_content:vlsuite_cta:vlsuite_link:item': 'block_content:vlsuite_cta:vlsuite_link:item'
'block_content:vlsuite_image:vlsuite_image:item': 'block_content:vlsuite_image:vlsuite_image:item'
'block_content:vlsuite_text:vlsuite_text': 'block_content:vlsuite_text:vlsuite_text'
'node:vlsuite_landing:field_vlsuite_landing_cta_link:item': 'node:vlsuite_landing:field_vlsuite_landing_cta_link:item'
'vlsuite_layout:section': 'vlsuite_layout:section'
'vlsuite_layout:main_regions': 'vlsuite_layout:main_regions'
visual_name: Rounded
class_prefix: 'rounded '
values:
circle:
visual_name: Circle
class_suffix: rounded-circle
rounded:
visual_name: Rounded
class_suffix: defined-by-prefix
pill:
visual_name: Pill
class_suffix: rounded-pill
shadow:
apply_to:
'block_content:vlsuite_text:vlsuite_text': 'block_content:vlsuite_text:vlsuite_text'
'vlsuite_layout:section': 'vlsuite_layout:section'
'vlsuite_layout:main_regions': 'vlsuite_layout:main_regions'
visual_name: Shadow
class_prefix: shadow
values:
shadow:
visual_name: Shadow
class_suffix: defined-by-prefix
small:
visual_name: Small
class_suffix: shadow-sm
large:
visual_name: Large
class_suffix: shadow-lg
position:
apply_to:
'block_content:vlsuite_icon': 'block_content:vlsuite_icon'
visual_name: Position
class_prefix: position-
values:
top-left-translate-middle:
visual_name: 'Top left translate middle'
class_suffix: 'absolute top-0 start-0 translate-middle'
top-center-translate-middle:
visual_name: 'Top center translate middle'
class_suffix: 'absolute top-0 start-50 translate-middle'
top-left:
visual_name: 'Top left'
class_suffix: 'absolute top-0 start-0'
top-center:
visual_name: 'Top center'
class_suffix: 'absolute top-0 start-50 translate-middle-x'
border:
apply_to:
'vlsuite_layout:main_regions': 'vlsuite_layout:main_regions'
visual_name: Border
class_prefix: 'border-start border-'
values:
border-left:
visual_name: 'Border left'
class_suffix: '2'
margin-start:
apply_to:
'vlsuite_layout:main_regions': 'vlsuite_layout:main_regions'
visual_name: 'Margin left'
class_prefix: ms-
values:
spacer-1:
visual_name: 'Spacer 1'
class_suffix: '1'
spacer-2:
visual_name: 'Spacer 2'
class_suffix: '2'
spacer-3:
visual_name: 'Spacer 3'
class_suffix: '3'
spacer-4:
visual_name: 'Spacer 4'
class_suffix: '4'
spacer-5:
visual_name: 'Spacer 5'
class_suffix: '5'
badge:
apply_to:
'block_content:vlsuite_text:vlsuite_text': 'block_content:vlsuite_text:vlsuite_text'
visual_name: Badge
class_prefix: 'badge '
values:
primary:
visual_name: Primary
class_suffix: 'rounded-pill bg-primary'
secondary:
visual_name: Secondary
class_suffix: 'rounded-pill bg-secondary'
success:
visual_name: Success
class_suffix: 'rounded-pill bg-success'
danger:
visual_name: Danger
class_suffix: 'rounded-pill bg-danger'
warning:
visual_name: Warning
class_suffix: 'rounded-pill bg-warning text-dark'
info:
visual_name: Info
class_suffix: 'rounded-pill bg-info text-dark'
light:
visual_name: Light
class_suffix: 'rounded-pill bg-light text-dark'
dark:
visual_name: Dark
class_suffix: 'rounded-pill bg-dark'
outline-warning:
visual_name: 'Outline warning'
class_suffix: 'rounded-pill text-warning border border-1 border-warning'
width:
apply_to:
'block_content:vlsuite_collection_cta:vlsuite_link:item': 'block_content:vlsuite_collection_cta:vlsuite_link:item'
'block_content:vlsuite_cta:vlsuite_link:item': 'block_content:vlsuite_cta:vlsuite_link:item'
'node:vlsuite_landing:field_vlsuite_landing_cta_link:item': 'node:vlsuite_landing:field_vlsuite_landing_cta_link:item'
visual_name: Width
class_prefix: w-
values:
100:
visual_name: 100%
class_suffix: '100'
ratio:
apply_to:
'block_content:vlsuite_collection_cta:vlsuite_image:item': 'block_content:vlsuite_collection_cta:vlsuite_image:item'
'block_content:vlsuite_image:vlsuite_image:item': 'block_content:vlsuite_image:vlsuite_image:item'
'node:vlsuite_landing:field_vlsuite_landing_main_image:item': 'node:vlsuite_landing:field_vlsuite_landing_main_image:item'
'vlsuite_layout:row': 'vlsuite_layout:row'
visual_name: Ratio
class_prefix: vlsuite-ratio-
values:
1-1:
visual_name: 1/1
class_suffix: 1-1
3-2:
visual_name: 3/2
class_suffix: 3-2
4-3:
visual_name: 4/3
class_suffix: 4-3
16-9:
visual_name: 16/9
class_suffix: 16-9
21-9:
visual_name: 21/9
class_suffix: 21-9
translate:
apply_to:
'vlsuite_layout:main_regions': 'vlsuite_layout:main_regions'
visual_name: Translate
class_prefix: translate-
values:
vertically:
visual_name: Vertically
class_suffix: middle-y
