margin top divider interface option

app/src/interfaces/divider/divider.vue

@@ -1,6 +1,6 @@
 <template>
 	<v-divider
-		:class="{ margin: icon || title }"
+		:class="{ margin: icon || title, 'extra-margin': marginTop }"
 		:style="{
 			'--v-divider-color': color,
 			'--v-divider-label-color': color,
@@ -30,6 +30,10 @@ export default defineComponent({
 			type: String,
 			default: null,
 		},
+		marginTop: {
+			type: Boolean,
+			default: false,
+		},
 		inlineTitle: {
 			type: Boolean,
 			default: false,
@@ -42,4 +46,7 @@ export default defineComponent({
 .margin {
 	margin-top: 12px;
 }
+.extra-margin {
+	margin-top: 40px;
+}
 </style>

app/src/interfaces/divider/index.ts

@@ -35,13 +35,28 @@ export default defineInterface(({ i18n }) => ({
 			name: i18n.t('title'),
 			type: 'string',
 			meta: {
-				width: 'half',
+				width: 'full',
 				interface: 'text-input',
 				options: {
 					placeholder: i18n.t('interfaces.divider.title_placeholder'),
 				},
 			},
 		},
+		{
+			field: 'marginTop',
+			name: i18n.t('interfaces.divider.margin_top'),
+			type: 'boolean',
+			meta: {
+				width: 'half',
+				interface: 'toggle',
+				options: {
+					label: i18n.t('interfaces.divider.margin_top_label'),
+				},
+			},
+			schema: {
+				default_value: false,
+			},
+		},
 		{
 			field: 'inlineTitle',
 			name: i18n.t('interfaces.divider.inline_title'),

app/src/lang/translations/en-US.yaml

@@ -822,6 +822,8 @@ interfaces:
     title_placeholder: Enter a title...
     inline_title: Inline Title
     inline_title_label: Show title inside line
+    margin_top: Margin Top
+    margin_top_label: Increase Top Margin
   dropdown:
     description: Select a value from a dropdown
     choices_placeholder: Add a new choice