Base UI

Modal
Regular Modal A Regular Modal to display important information and interactive content in a pop-up window.
Alerts Modal A Alerts Modal to display important information and alerts content in a pop-up window.
Documentation
Available Parameters
Parameter Type Description
modalId Unique Text
required 		Set Unique ID for Modal component.
variation Text
Default : modal-default 		Set variation for Modal component.
List of available variations :
  • modal-default
  • modal-success
  • modal-warning
  • modal-danger
size Text
Default : default 		Set size for Modal component.
List of available variations :
  • default
  • large
  • small
customClasses Text Set custom additional class for modal.
title Text
required for modal-default 		Display Title of Modal component.
content Text
required 		Display content of Modal component.
buttons Array of HTML Text Set list of Buttons that will be displayed in the modal footer.
Starter Kit Codes
Starter Kit Code 
 {# include components/modal  #}
 {% include "../../components/modal.twig", with {
    	'modalId'		: 'example-modal-default',

	'size'		: 'default',
	'customClasses'	: 'position-static d-block show',

	'title'		: 'Standard Modal',
	'content'		: '<p>Here goes the small example content for our standard modal. </p>
			<p>The body of the modal, where you can show a message in single or multi-line. Even include a video. For example, embed a youtube video! or add some picture.</p>',
	'buttons'		: [
		'<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>',
		'<button type="button" class="btn btn-primary">Save changes</button>'
	]
 } %}
Starter Kit Code 
 {# include components/modal  #}
 {% include "../../components/modal.twig", with {
    	'modalId'		: 'example-modal-large',

	'size'		: 'large',
	'customClasses'	: 'position-static d-block show',

	'title'		: 'Large Modal',
	'content'		: '<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
		<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.</p>',
	'buttons'		: [
		'<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>',
		'<button type="button" class="btn btn-primary">Save changes</button>'
	]
 } %}
Starter Kit Code 
 {# include components/modal  #}
 {% include "../../components/modal.twig", with {
    	'modalId'		: 'example-modal-small',

	'size'		: 'small',
	'customClasses'	: 'position-static d-block show',

	'title'		: 'Small Modal',
	'content'		: '<p>Here goes the small example content for our standard modal.</p>',
	'buttons'		: [
		'<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>',
		'<button type="button" class="btn btn-primary">Save changes</button>'
	]
 } %}
Starter Kit Code 
 {# include components/modal  #}
 {% include "../../components/modal.twig", with {
    	'modalId'		: 'example-modal-success',

	'variation'	: 'modal-success',

	'size'		: 'default',
	'customClasses'	: 'position-static d-block show',

	'content'		: '<strong>Congratulation!</strong>
			<p>Here goes the small example content for our Success Alert modal.</p>',
	'buttons'		: [
		'<button type="button" class="btn btn-primary">Continue</button>'
	]
 } %}
Starter Kit Code 
 {# include components/modal  #}
 {% include "../../components/modal.twig", with {
    	'modalId'		: 'example-modal-warning',

	'variation'	: 'modal-warning',

	'size'		: 'default',
	'customClasses'	: 'position-static d-block show',

	'content'		: '<strong>Incorrect Information</strong>
			<p>The body of the modal, where you can show a message in single or multi-line. Even include a video. For example, embed a youtube video! or add some picture.</p>',
	'buttons'		: [
		'<button type="button" class="btn btn-outline-secondary">Close</button>'
	]
 } %}
Starter Kit Code 
 {# include components/modal  #}
 {% include "../../components/modal.twig", with {
    	'modalId'		: 'example-modal-danger',

	'variation'	: 'modal-danger',

	'size'		: 'default',
	'customClasses'	: 'position-static d-block show',

	'content'		: '<strong>Are you sure?</strong>
			<p>Do you really want to delete these files? this process cannot be undone.</p>',
	'buttons'		: [
		'<button type="button" class="btn btn-outline-secondary">Cancel</button>',
		'<button type="button" class="btn btn-danger">Delete</button>'
	]
 } %}