display_builder-1.0.x-dev/modules/display_builder_devel/fixtures/ui_suite_bootstrap_demo.yml
modules/display_builder_devel/fixtures/ui_suite_bootstrap_demo.yml
-
source_id: component
source:
component:
component_id: 'ui_suite_bootstrap:grid_row_1'
slots:
col_1_content:
sources:
-
source_id: component
source:
component:
component_id: 'ui_suite_bootstrap:grid_row'
variant_id: null
props:
container:
source_id: select
source:
value: container
slots:
content:
sources:
-
source_id: component
source:
component:
component_id: 'ui_suite_bootstrap:alert'
variant_id:
source_id: select
source:
value: primary
slots:
heading:
sources:
-
source_id: component
source:
component:
component_id: 'ui_suite_bootstrap:grid_row_3'
variant_id: null
props:
col_xs:
source_id: selects
source:
value:
- '12'
- '12'
- '12'
col_sm:
source_id: selects
source:
value:
- ''
- ''
- ''
col_md:
source_id: selects
source:
value:
- auto
- auto
- auto
col_lg:
source_id: selects
source:
value:
- ''
- ''
- ''
col_xl:
source_id: selects
source:
value:
- ''
- ''
- ''
col_xxl:
source_id: selects
source:
value:
- ''
- ''
- ''
col_offset:
source_id: selects
source:
value:
- ''
- ''
- ''
slots:
col_1_content:
sources:
-
source_id: icon_renderable
source:
value:
target_id: 'olivero:site-under-maintenance-icon'
settings:
olivero:
width: '32'
height: '32'
alt: ''
title: ''
icon_id: 'olivero:site-under-maintenance-icon'
icon_settings:
olivero:
width: '32'
height: '32'
alt: ''
title: ''
saved_values:
width: '32'
height: '32'
alt: ''
title: ''
col_2_content:
sources:
-
source_id: token
source:
value: ' Welcome to your Drupal Display Builder demo with UI Suite Bootstrap! '
_third_party_settings:
ui_styles:
styles: { }
col_3_content:
sources:
-
source_id: icon_renderable
source:
value:
target_id: 'olivero:site-under-maintenance-icon'
settings:
olivero:
width: '32'
height: '32'
alt: ''
title: ''
icon_id: 'olivero:site-under-maintenance-icon'
icon_settings:
olivero:
width: '32'
height: '32'
alt: ''
title: ''
saved_values:
width: '32'
height: '32'
alt: ''
title: ''
message:
sources:
-
source_id: wysiwyg
source:
value:
value: |-
<p>This demo is based on an <b>early stage development</b> and is intended to showcase some main functionalities of the Display builder module.<br>
There is still some ongoing <b>bug fixes</b> and features to be changed or added.<br>
If you crash or get stuck with this builder you can reset it with the link on the top of this page.
</p>
format: full_html
component:
slots:
message:
sources:
-
source_id: icon_renderable
source:
value:
target_id: 'core:drupal-wordmark'
settings:
core:
width: '120'
height: '32'
alt: ''
title: ''
icon_id: 'core:drupal-wordmark'
icon_settings:
core:
width: '120'
height: '32'
alt: ''
title: ''
saved_values:
width: '120'
height: '32'
alt: ''
title: ''
-
source_id: icon_renderable
source:
value:
target_id: 'core:drupal-wordmark'
settings:
core:
width: '120'
height: '32'
alt: ''
title: ''
icon_id: 'core:drupal-wordmark'
icon_settings:
core:
width: '120'
height: '32'
alt: ''
title: ''
saved_values:
width: '120'
height: '32'
alt: ''
title: ''
_third_party_settings:
ui_styles:
styles:
selected:
text_text_alignment: text-center
-
source_id: token
source:
value: '<hr>'
_third_party_settings:
ui_styles:
styles:
selected:
spacing_margin: m-2
-
source_id: component
source:
component:
component_id: 'ui_suite_bootstrap:grid_row_4'
slots:
col_1_content:
sources:
-
source_id: component
source:
component:
component_id: 'ui_suite_bootstrap:alert'
variant_id:
source_id: select
source:
value: warning
props: { }
slots:
heading:
sources:
-
source_id: icon_renderable
source:
value:
target_id: 'heroicons:chart-pie'
settings:
heroicons:
size: '32'
color: '#ea8039'
icon_id: 'heroicons:chart-pie'
icon_settings:
heroicons:
size: '32'
color: '#ea8039'
saved_values:
size: '32'
color: '#ea8039'
-
source_id: token
source:
value: 'Hello There!'
_third_party_settings:
ui_styles:
styles: { }
message:
sources:
-
source_id: token
source:
value: 'This is a message from out there.'
col_2_content:
sources:
-
source_id: component
source:
component:
component_id: 'ui_suite_bootstrap:alert'
variant_id:
source_id: select
source:
value: info
props: { }
slots:
heading:
sources:
-
source_id: icon_renderable
source:
value:
target_id: 'heroicons:academic-cap'
settings:
heroicons:
size: '32'
color: '#a3d7ff'
icon_id: 'heroicons:academic-cap'
icon_settings:
heroicons:
size: '32'
color: '#a3d7ff'
saved_values:
size: '32'
color: '#a3d7ff'
-
source_id: token
source:
value: 'Hello There!'
_third_party_settings:
ui_styles:
styles: { }
message:
sources:
-
source_id: token
source:
value: 'This is a message from out there.'
col_3_content:
sources:
-
source_id: component
source:
component:
component_id: 'ui_suite_bootstrap:alert'
variant_id:
source_id: select
source:
value: light
props: { }
slots:
heading:
sources:
-
source_id: icon_renderable
source:
value:
target_id: 'heroicons:arrow-down-on-square-stack'
settings:
heroicons:
size: '32'
color: '#4a4a4a'
icon_id: 'heroicons:arrow-down-on-square-stack'
icon_settings:
heroicons:
size: '32'
color: '#4a4a4a'
saved_values:
size: '32'
color: '#4a4a4a'
_third_party_settings:
ui_styles:
styles: { }
-
source_id: token
source:
value: 'Hello There!'
_third_party_settings:
ui_styles:
styles: { }
message:
sources:
-
source_id: token
source:
value: 'This is a message from out there.'
col_4_content:
sources:
-
source_id: component
source:
component:
component_id: 'ui_suite_bootstrap:alert'
variant_id:
source_id: select
source:
value: success
props:
dismissible:
source_id: checkbox
source:
value: '1'
heading_level:
source_id: select
source:
value: '3'
slots:
heading:
sources:
-
source_id: icon_renderable
source:
value:
target_id: 'heroicons:arrow-down-on-square-stack'
settings:
heroicons:
size: '32'
color: '#4a4a4a'
icon_id: 'heroicons:arrow-down-on-square-stack'
icon_settings:
heroicons:
size: '32'
color: '#4a4a4a'
saved_values:
size: '32'
color: '#4a4a4a'
_third_party_settings:
ui_styles:
styles: { }
-
source_id: token
source:
value: 'Hello There!'
_third_party_settings:
ui_styles:
styles: { }
message:
sources:
-
source_id: token
source:
value: 'This is a message from out there.'
-
source_id: token
source:
value: '<hr>'
_third_party_settings:
ui_styles:
styles:
selected:
spacing_margin: m-2
-
source_id: component
source:
component:
component_id: 'ui_suite_bootstrap:grid_row_3'
slots:
col_1_content:
sources:
-
source_id: component
source:
component:
component_id: 'ui_suite_bootstrap:accordion'
slots:
content:
sources:
-
source_id: component
source:
component:
component_id: 'ui_suite_bootstrap:accordion_item'
slots:
title:
sources:
-
source_id: icon_renderable
source:
value:
target_id: 'font_awesome:drupal'
settings:
font_awesome:
size: '32'
color: '#1d49cd'
alt: ''
icon_id: 'font_awesome:drupal'
icon_settings:
font_awesome:
size: '32'
color: '#1d49cd'
alt: ''
saved_values:
size: '32'
color: '#1d49cd'
alt: ''
-
source_id: token
source:
value: 'Here I am'
content:
sources:
-
source_id: icon_renderable
source:
value:
target_id: 'olivero:throbber'
settings:
olivero:
width: '32'
height: '32'
alt: ''
title: ''
icon_id: 'olivero:throbber'
icon_settings:
olivero:
width: '32'
height: '32'
alt: ''
title: ''
saved_values:
width: '32'
height: '32'
alt: ''
title: ''
-
source_id: token
source:
value: 'Intereant allicit signiferumque aequum'
-
source_id: component
source:
component:
component_id: 'ui_suite_bootstrap:accordion_item'
slots:
title:
sources:
-
source_id: icon_renderable
source:
value:
target_id: 'font_awesome:drupal'
settings:
font_awesome:
size: '32'
color: '#cd1d1d'
alt: ''
icon_id: 'font_awesome:drupal'
icon_settings:
font_awesome:
size: '32'
color: '#cd1d1d'
alt: ''
saved_values:
size: '32'
color: '#cd1d1d'
alt: ''
-
source_id: icon_renderable
source:
value:
target_id: 'olivero:throbber'
settings:
olivero:
width: '32'
height: '32'
alt: ''
title: ''
icon_id: 'olivero:throbber'
icon_settings:
olivero:
width: '32'
height: '32'
alt: ''
title: ''
saved_values:
width: '32'
height: '32'
alt: ''
title: ''
-
source_id: token
source:
value: 'Here I am'
content:
sources:
-
source_id: wysiwyg
source:
value:
value: |-
<p>Intereant allicit signiferumque aequum
Soleat loqueretur aliquid cognitionem dissentiunt placuit quietae statim fabulis primus insipientiam iisque appellat fodere virtute Itaque finxerat!
Dediti consoletur fama</br
Falsi mei temeritas laus sentire inculta pedalis certamen quiddam sinit sitne aequi dissentias urbanitas corrupti quodsi Latinis cotidie excelsus mollitia breviter insipientiam audaces chaere iisque illi mutans praesentibus. Praebeat adhaesiones Ad L omnium quae venisset una Rutilius fungimur posuit praetermittenda eisque segnitiae Caecilii tradit delicatissimi Triari deorsum!</p>
format: full_html
-
source_id: wysiwyg
source:
value:
value: |-
<p>Intereant allicit signiferumque aequum
Soleat loqueretur aliquid cognitionem dissentiunt placuit quietae statim fabulis primus insipientiam iisque appellat fodere virtute Itaque finxerat!
Dediti consoletur fama</br
Falsi mei temeritas laus sentire inculta pedalis certamen quiddam sinit sitne aequi dissentias urbanitas corrupti quodsi Latinis cotidie excelsus mollitia breviter insipientiam audaces chaere iisque illi mutans praesentibus. Praebeat adhaesiones Ad L omnium quae venisset una Rutilius fungimur posuit praetermittenda eisque segnitiae Caecilii tradit delicatissimi Triari deorsum!</p>
format: full_html
col_2_content:
sources:
-
source_id: component
source:
component:
component_id: 'ui_suite_bootstrap:list_group'
slots:
items:
sources:
-
source_id: component
source:
component:
component_id: 'ui_suite_bootstrap:list_group_item'
slots:
content:
sources:
-
source_id: icon_renderable
source:
value:
target_id: 'font_awesome:drupal'
settings:
font_awesome:
size: '32'
color: '#1d49cd'
alt: ''
icon_id: 'font_awesome:drupal'
icon_settings:
font_awesome:
size: '32'
color: '#1d49cd'
alt: ''
saved_values:
size: '32'
color: '#1d49cd'
alt: ''
-
source_id: token
source:
value: 'Here I am'
-
source_id: component
source:
component:
component_id: 'ui_suite_bootstrap:list_group_item'
slots:
content:
sources:
-
source_id: icon_renderable
source:
value:
target_id: 'font_awesome:drupal'
settings:
font_awesome:
size: '32'
color: '#7e1dcd'
alt: ''
icon_id: 'font_awesome:drupal'
icon_settings:
font_awesome:
size: '32'
color: '#7e1dcd'
alt: ''
saved_values:
size: '32'
color: '#7e1dcd'
alt: ''
-
source_id: token
source:
value: 'Here I am'
col_3_content:
sources:
-
source_id: component
source:
component:
component_id: 'ui_suite_bootstrap:blockquote'
slots:
content:
sources:
-
source_id: icon_renderable
source:
value:
target_id: 'font_awesome:drupal'
settings:
font_awesome:
size: '32'
color: '#1dcd72'
alt: ''
icon_id: 'font_awesome:drupal'
icon_settings:
font_awesome:
size: '32'
color: '#1dcd72'
alt: ''
saved_values:
size: '32'
color: '#1dcd72'
alt: ''
-
source_id: token
source:
value: 'Intereant allicit'
footer:
sources:
-
source_id: token
source:
value: 'Hello There!'
_third_party_settings:
ui_styles:
styles: { }
-
source_id: token
source:
value: '<hr>'
-
source_id: component
source:
component:
component_id: 'ui_suite_bootstrap:alert'
variant_id:
source_id: select
source:
value: dark
props: { }
slots:
heading:
sources:
-
source_id: icon_renderable
source:
value:
target_id: 'heroicons:adjustments-horizontal'
settings:
heroicons:
size: '32'
color: '#ffffff'
icon_id: 'heroicons:adjustments-horizontal'
icon_settings:
heroicons:
size: '32'
color: '#ffffff'
saved_values:
size: '32'
color: '#ffffff'
_third_party_settings:
ui_styles:
styles: { }
-
source_id: token
source:
value: 'This is a message, an important message!'
_third_party_settings:
ui_styles:
styles: { }
message:
sources:
-
source_id: wysiwyg
source:
value:
value: |-
<p>Intereant allicit signiferumque aequum
Soleat loqueretur aliquid cognitionem dissentiunt placuit quietae statim fabulis primus insipientiam iisque appellat fodere virtute Itaque finxerat!
Dediti consoletur fama</br
Falsi mei temeritas laus sentire inculta pedalis certamen quiddam sinit sitne aequi dissentias urbanitas corrupti quodsi Latinis cotidie excelsus mollitia breviter insipientiam audaces chaere iisque illi mutans praesentibus. Praebeat adhaesiones Ad L omnium quae venisset una Rutilius fungimur posuit praetermittenda eisque segnitiae Caecilii tradit delicatissimi Triari deorsum!</p>
format: full_html
-
source_id: token
source:
value: '<hr>'
_third_party_settings:
ui_styles:
styles:
selected:
spacing_margin_top: mt-2
spacing_margin_bottom: mb-2
-
source_id: component
source:
component:
component_id: 'ui_suite_bootstrap:grid_row_2'
slots:
col_1_content:
sources:
-
source_id: component
source:
component:
component_id: 'ui_suite_bootstrap:card'
slots:
header:
sources:
-
source_id: token
source:
value: 'Hello There!'
_third_party_settings:
ui_styles:
styles:
selected:
typography: h2
spacing_margin_start: ms-2
display_all: d-inline-block
content:
sources:
-
source_id: wysiwyg
source:
value:
value: |-
<p>Intereant allicit signiferumque aequum
Soleat loqueretur aliquid cognitionem dissentiunt placuit quietae statim fabulis primus insipientiam iisque appellat fodere virtute Itaque finxerat!
Dediti consoletur fama</br
Falsi mei temeritas laus sentire inculta pedalis certamen quiddam sinit sitne aequi dissentias urbanitas corrupti quodsi Latinis cotidie excelsus mollitia breviter insipientiam audaces chaere iisque illi mutans praesentibus. Praebeat adhaesiones Ad L omnium quae venisset una Rutilius fungimur posuit praetermittenda eisque segnitiae Caecilii tradit delicatissimi Triari deorsum!</p>
format: full_html
_third_party_settings:
ui_styles:
styles:
selected:
spacing_margin: m-2
-
source_id: component
source:
component:
component_id: 'ui_suite_bootstrap:button_group'
variant_id:
source_id: select
source:
value: lg
props: { }
slots:
buttons:
sources:
-
source_id: component
source:
component:
component_id: 'ui_suite_bootstrap:button'
variant_id:
source_id: select
source:
value: primary
props: { }
slots:
label:
sources:
-
source_id: token
source:
value: This
-
source_id: component
source:
component:
component_id: 'ui_suite_bootstrap:button'
variant_id:
source_id: select
source:
value: success
props: { }
slots:
label:
sources:
-
source_id: token
source:
value: is
-
source_id: component
source:
component:
component_id: 'ui_suite_bootstrap:button'
variant_id:
source_id: select
source:
value: warning
props: { }
slots:
label:
sources:
-
source_id: token
source:
value: awesome
_third_party_settings:
ui_styles:
styles:
selected:
spacing_margin_end: me-2
display_all: d-inline-block
-
source_id: icon_renderable
source:
value:
target_id: 'font_awesome:space-awesome'
settings:
font_awesome:
size: '32'
color: '#917373'
alt: ''
icon_id: 'font_awesome:space-awesome'
icon_settings:
font_awesome:
size: '32'
color: '#917373'
alt: ''
saved_values:
size: '32'
color: '#917373'
alt: ''
_third_party_settings:
ui_styles:
styles:
selected:
spacing_margin: m-2
footer:
sources:
-
source_id: icon_renderable
source:
value:
target_id: 'font_awesome:business-time'
settings:
font_awesome:
size: '32'
color: '#a22f2f'
alt: ''
icon_id: 'font_awesome:business-time'
icon_settings:
font_awesome:
size: '32'
color: '#a22f2f'
alt: ''
saved_values:
size: '32'
color: '#a22f2f'
alt: ''
-
source_id: token
source:
value: 'A long time ago...'
component:
slots:
footer:
sources:
-
source_id: icon_renderable
source:
value:
target_id: 'heroicons:adjustments-horizontal'
settings:
heroicons:
size: '32'
color: '#ffffff'
icon_id: 'heroicons:adjustments-horizontal'
icon_settings:
heroicons:
size: '32'
color: '#ffffff'
saved_values:
size: '32'
color: '#ffffff'
_third_party_settings:
ui_styles:
styles:
selected:
colors_color: text-secondary
text_font_italics: fst-italic
spacing_margin_start: ms-2
display_all: d-inline-block
image:
sources: { }
col_1_content:
sources:
-
source_id: icon_renderable
source:
value:
target_id: 'heroicons:adjustments-horizontal'
settings:
heroicons:
size: '32'
color: '#ffffff'
icon_id: 'heroicons:adjustments-horizontal'
icon_settings:
heroicons:
size: '32'
color: '#ffffff'
saved_values:
size: '32'
color: '#ffffff'
col_2_content:
sources:
-
source_id: component
source:
component:
component_id: 'ui_suite_bootstrap:card'
slots:
header:
sources:
-
source_id: icon_renderable
source:
value:
target_id: 'core:EL_blue_RGB(1)'
settings:
core:
width: ''
height: '42'
alt: ''
title: ''
icon_id: 'core:EL_blue_RGB(1)'
icon_settings:
core:
width: ''
height: '42'
alt: ''
title: ''
saved_values:
width: ''
height: '42'
alt: ''
title: ''
-
source_id: token
source:
value: 'Welcome here!'
component:
slots:
header:
sources:
-
source_id: icon_renderable
source:
value:
target_id: 'core:EL_blue_RGB(1)'
settings:
core:
width: ''
height: '42'
alt: ''
title: ''
icon_id: 'core:EL_blue_RGB(1)'
icon_settings:
core:
width: ''
height: '42'
alt: ''
title: ''
saved_values:
width: ''
height: '42'
alt: ''
title: ''
_third_party_settings:
ui_styles:
styles:
selected:
typography: h2
spacing_margin_start: ms-2
display_all: d-inline-block
content:
sources:
-
source_id: wysiwyg
source:
value:
value: |-
<p>Intereant allicit signiferumque aequum
Soleat loqueretur aliquid cognitionem dissentiunt placuit quietae statim fabulis primus insipientiam iisque appellat fodere virtute Itaque finxerat!</p>
format: full_html
_third_party_settings:
ui_styles:
styles:
selected:
spacing_margin: m-2
-
source_id: wysiwyg
source:
value:
value: |-
<p>Intereant allicit signiferumque aequum
Soleat loqueretur aliquid cognitionem dissentiunt placuit quietae statim fabulis primus insipientiam iisque appellat fodere virtute Itaque finxerat!</p>
format: full_html
-
source_id: component
source:
component:
component_id: 'ui_suite_bootstrap:button_group'
variant_id:
source_id: select
source:
value: sm
props: { }
slots:
buttons:
sources:
-
source_id: component
source:
component:
component_id: 'ui_suite_bootstrap:button'
variant_id:
source_id: select
source:
value: success
props: { }
slots:
label:
sources:
-
source_id: token
source:
value: is
-
source_id: component
source:
component:
component_id: 'ui_suite_bootstrap:button'
variant_id:
source_id: select
source:
value: warning
props: { }
slots:
label:
sources:
-
source_id: token
source:
value: awesome
-
source_id: component
source:
component:
component_id: 'ui_suite_bootstrap:button'
variant_id:
source_id: select
source:
value: primary
props: { }
slots:
label:
sources:
-
source_id: token
source:
value: This
-
source_id: icon_renderable
source:
value:
target_id: 'font_awesome:space-awesome'
settings:
font_awesome:
size: '32'
color: '#917373'
alt: ''
icon_id: 'font_awesome:space-awesome'
icon_settings:
font_awesome:
size: '32'
color: '#917373'
alt: ''
saved_values:
size: '32'
color: '#917373'
alt: ''
_third_party_settings:
ui_styles:
styles:
selected:
spacing_margin: m-2
footer:
sources:
-
source_id: icon_renderable
source:
value:
target_id: 'font_awesome:business-time'
settings:
font_awesome:
size: '32'
color: '#a22f2f'
alt: ''
icon_id: 'font_awesome:business-time'
icon_settings:
font_awesome:
size: '32'
color: '#a22f2f'
alt: ''
saved_values:
size: '32'
color: '#a22f2f'
alt: ''
-
source_id: token
source:
value: 'A long time ago...'
_third_party_settings:
ui_styles:
styles:
selected:
colors_color: text-secondary
text_font_italics: fst-italic
spacing_margin_start: ms-2
display_all: d-inline-block
image:
sources: { }
-
source_id: token
source:
value: '<hr>'
_third_party_settings:
ui_styles:
styles:
selected:
spacing_margin: m-2
-
source_id: component
source:
component:
component_id: 'ui_suite_bootstrap:grid_row_4'
slots:
col_1_content:
sources:
-
source_id: component
source:
component:
component_id: 'ui_suite_bootstrap:alert'
variant_id:
source_id: select
source:
value: primary
slots:
heading:
sources:
-
source_id: icon_renderable
source:
value:
target_id: 'font_awesome:pen-nib'
settings:
font_awesome:
size: '32'
color: '#1f5fe0'
alt: ''
icon_id: 'font_awesome:pen-nib'
icon_settings:
font_awesome:
size: '32'
color: '#1f5fe0'
alt: ''
saved_values:
size: '32'
color: '#1f5fe0'
alt: ''
-
source_id: token
source:
value: 'Hello There!'
_third_party_settings:
ui_styles:
styles:
selected:
spacing_margin_start: ms-2
display_all: d-inline-block
message:
sources:
-
source_id: token
source:
value: 'Hello There!'
col_2_content:
sources:
-
source_id: component
source:
component:
component_id: 'ui_suite_bootstrap:alert'
variant_id:
source_id: select
source:
value: secondary
slots:
heading:
sources:
-
source_id: icon_renderable
source:
value:
target_id: 'font_awesome:cart-plus'
settings:
font_awesome:
size: '32'
color: '#7d7d7d'
alt: ''
icon_id: 'font_awesome:cart-plus'
icon_settings:
font_awesome:
size: '32'
color: '#7d7d7d'
alt: ''
saved_values:
size: '32'
color: '#7d7d7d'
alt: ''
-
source_id: token
source:
value: 'Hello There!'
_third_party_settings:
ui_styles:
styles:
selected:
spacing_margin_start: ms-2
display_all: d-inline-block
message:
sources:
-
source_id: token
source:
value: 'Hello There!'
col_3_content:
sources:
-
source_id: component
source:
component:
component_id: 'ui_suite_bootstrap:alert'
variant_id:
source_id: select
source:
value: success
slots:
heading:
sources:
-
source_id: icon_renderable
source:
value:
target_id: 'heroicons:arrow-left-on-rectangle'
settings:
heroicons:
size: '32'
color: '#3bea39'
icon_id: 'heroicons:arrow-left-on-rectangle'
icon_settings:
heroicons:
size: '32'
color: '#3bea39'
saved_values:
size: '32'
color: '#3bea39'
-
source_id: token
source:
value: 'Hello There!'
_third_party_settings:
ui_styles:
styles:
selected:
spacing_margin_start: ms-2
display_all: d-inline-block
message:
sources:
-
source_id: token
source:
value: 'Hello There!'
col_4_content:
sources:
-
source_id: component
source:
component:
component_id: 'ui_suite_bootstrap:alert'
variant_id:
source_id: select
source:
value: danger
slots:
heading:
sources:
-
source_id: icon_renderable
source:
value:
target_id: 'heroicons:archive-box'
settings:
heroicons:
size: '32'
color: '#f514cc'
icon_id: 'heroicons:archive-box'
icon_settings:
heroicons:
size: '32'
color: '#f514cc'
saved_values:
size: '32'
color: '#f514cc'
-
source_id: token
source:
value: 'Hello There!'
_third_party_settings:
ui_styles:
styles:
selected:
spacing_margin_start: ms-2
display_all: d-inline-block
message:
sources:
-
source_id: token
source:
value: 'Hello There!'
