Each variation will be presented in the following section.
Nisi culpa nostrud sint nisi laboris ipsum duis. Deserunt esse velit tempor adipisicing ut ad nulla cillum commodo anim. Sunt cillum ullamco irure magna ut dolore voluptate exercitation adipisicing ipsum esse nostrud fugiat. Incididunt mollit irure tempor dolor velit consectetur aliquip exercitation ut nostrud amet Lorem.
Aute mollit veniam deserunt enim enim quis ut officia quis velit.FAQ
component)This blueprint is based on the blueprint of Veams.
Veams#5.0.0veams install bp absolute/filepath/to/form-controls
form-controls.hbs| Parameter | Type | Default | Description |
|---|---|---|---|
| settings.formControlsClasses | String | '' |
Modifier classes for component |
| settings.formControlsContextClass | String | 'default' |
Context class of component |
| Parameter | Type | Description |
|---|---|---|
| content.formControlsField | String | Please add a description! |
There are multiple variables which you can change:
| Variable | Value | Description |
|---|---|---|
| $form-controls-my-custom-var | 0px |
Please add a description! |
There are modifier classes you can add to c-form-controls:
| Modifier | Description |
|---|---|
| is-modifier | Please add a description! |
<div class="c-form-controls{{#if settings.formControlsContextClass}}--{{settings.formControlsContextClass}}{{else}}--default{{/if}}{{#if settings.formControlsClasses}} {{settings.formControlsClasses}}{{/if}}"
data-css="c-form-controls">
<div>
<p>
Nisi culpa nostrud sint nisi laboris ipsum duis. Deserunt esse velit tempor adipisicing ut ad nulla cillum commodo anim.
Sunt cillum ullamco irure magna ut dolore voluptate exercitation adipisicing ipsum esse nostrud fugiat. Incididunt
mollit irure tempor dolor velit consectetur aliquip exercitation ut nostrud amet Lorem.
</p>
<p>
Aute mollit veniam deserunt enim enim quis ut officia quis velit.<a href="#" class="quote__link">FAQ</a>
</p>
</div>
</div>
{
"variations": {
"default": {
"docs": {
"variationName": "Default"
},
"settings": {
"formControlsContextClass": "default",
"formControlsClasses": ""
},
"content": {}
}
}
}
/* ===================================================
component: form-controls
=================================================== */
/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-form-controls"] {
}
/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-form-controls--default {
}
<div class="c-form-controls--default" data-css="c-form-controls">
<div>
<p>
Nisi culpa nostrud sint nisi laboris ipsum duis. Deserunt esse velit tempor adipisicing ut ad nulla cillum commodo anim.
Sunt cillum ullamco irure magna ut dolore voluptate exercitation adipisicing ipsum esse nostrud fugiat. Incididunt
mollit irure tempor dolor velit consectetur aliquip exercitation ut nostrud amet Lorem.
</p>
<p>
Aute mollit veniam deserunt enim enim quis ut officia quis velit.<a href="#" class="quote__link">FAQ</a>
</p>
</div>
</div>