Design Settings

HTML

{% if module.enabled %}
<div class="module-name {{ name }} {% if module.design_settings.background_option == 'color' %}bg-{{ module.design_settings.background_color }}{% endif %} sr-padding-{{ module.design_settings.top_bottom_padding }} {% if module.text_color != 'auto' %}text-{{ module.text_color }}{% endif %} {% if module.design_settings.class %}{{ module.design_settings.class }}{% endif %} {% if module.design_settings.border_top %}sr-line-top{% endif %} {% if module.design_settings.border_bottom %}sr-line-bottom{% endif %} {% if module.text_align != 'auto' %} text-{{ module.text_align }}{% endif %} prototype-no-background" {% if module.design_settings.sr_module_id %}id="{{ module.design_settings.sr_module_id }}"{% endif %}>
	
	<div class="{{ module.design_settings.layout }}">
		
		{% if module.design_settings.container_width != 'max' %}
		<div class="row">
			<div class="{{ width_class }}">
		{% endif %}
		
		{% if module.design_settings.container_width != 'max' %}
			</div>
		</div>
		{% endif %}

	</div>
	
</div>

{% require_css %}
<style>

</style>
{% end_require_css %}

{% require_js %}
<script>

</script>
{% end_require_js %}

{% endif %}

JSON

{
	"default": true,
	"label": "Enabled",
	"name": "enabled",
	"type": "boolean"
},
{
	"type": "group",
	"name": "design_settings",
	"label": "Design Settings",
	"children": [
		{
			"default": null,
			"label": "ID",
			"name": "sr_module_id",
			"type": "text"
		},
		{
			"default": null,
			"label": "Class",
			"name": "class",
			"type": "text"
		},
		{
			"choices": [
				[
					"container",
					"Page"
				],
				[
					"container-fluid",
					"Full Width"
				]
			],
			"default": "container",
			"display": "select",
			"label": "Layout",
			"name": "layout",
			"type": "choice",
			"required": true
		},
		{
			"choices": [
				[
					"min",
					"Minimum"
				],
				[
					"narrow",
					"Narrow"
				],
				[
					"wide",
					"Wide"
				],
				[
					"max",
					"Maximum"
				]
			],
			"default": "max",
			"display": "select",
			"label": "Container Width",
			"name": "container_width",
			"type": "choice",
			"required": true
		},
		{
			"choices": [
				[
					"auto",
					"Use default values"
				],
				[
					"zero",
					"No Padding"
				],
				[
					"half",
					"Small padding"
				],
				[
					"full",
					"Large padding"
				],
				[
					"custom",
					"Custom padding"
				]
			],
			"id": "top_bottom_padding",
			"default": "half",
			"display": "select",
			"label": "Top Bottom Padding",
			"name": "top_bottom_padding",
			"type": "choice",
			"required": true
		},
		{
			"name": "custom_padding",
			"type": "text",
			"label": "Custom Padding",
			"help_text": "Top, Right, Bottom, Left",
			"visibility": {
				"controlling_field": "top_bottom_padding",
				"controlling_value_regex": "custom",
				"operator": "EQUAL",
				"access": null
			},
			"default": "1rem 0rem 1rem 0rem"
		},
		{
			"default": false,
			"label": "Border Top",
			"name": "border_top",
			"type": "boolean"
		},
		{
			"default": false,
			"label": "Border Bottom",
			"name": "border_bottom",
			"type": "boolean"
		},
		{
			"choices": [
				[
					"image",
					"Image"
				],
				[
					"color",
					"Color"
				],
				[
					"custom",
					"Custom"
				]
			],
			"id": "background_option",
			"default": "color",
			"display": "select",
			"label": "Background Option",
			"name": "background_option",
			"type": "choice",
			"required": true
		},
		{
			"default": {
				"src": "",
				"alt": ""
			},
			"label": "Background Image",
			"name": "background_image",
			"visibility": {
				"controlling_field": "background_option",
				"controlling_value_regex": "image",
				"operator": "EQUAL"
			},
			"type": "image"
		},
		{
			"default": {
				"color": "#343a40",
				"opacity": 30
			},
			"label": "Background Overlay Color",
			"name": "background_overlay_color",
			"visibility": {
				"controlling_field": "background_option",
				"controlling_value_regex": "image",
				"operator": "EQUAL"
			},
			"help_text": "Recommended Width: 2880x1920px",
			"type": "color"
		},
		{
			"choices": [
				[
					"primary",
					"Primary"
				],
				[
					"secondary",
					"Secondary"
				],
				[
					"tertiary",
					"Tertiary"
				],
				[
					"white",
					"White"
				],
				[
					"black",
					"Black"
				],
				[
					"dark",
					"Dark"
				],
				[
					"light",
					"Light"
				],
				[
					"success",
					"Success"
				],
				[
					"info",
					"Info"
				],
				[
					"warning",
					"Warning"
				],
				[
					"danger",
					"Danger"
				],
				[
					"none",
					"None"
				]
			],
			"default": "white",
			"display": "select",
			"label": "Background Color",
			"name": "background_color",
			"type": "choice",
			"visibility": {
				"controlling_field": "background_option",
				"controlling_value_regex": "color",
				"operator": "EQUAL"
			},
			"required": true
		},
		{
			"default": {
				"color": "#fff"
			},
			"label": "Background Custom",
			"name": "background_custom",
			"visibility": {
				"controlling_field": "background_option",
				"controlling_value_regex": "custom",
				"operator": "EQUAL"
			},
			"type": "color"
		}
	]
}