Thentia

Component:

Page Title

Code:

//Section
.tc-section
	.h1.page-title Page Title
	.row

Component:

Section Title

Code:

//Section
.tc-section
	.h4.tc-section__title Section Title
	.row

Component:

Input *Label Top Secondary

Label Bottom

Code:

.col-md-6
	+input('text', 'Input', 'Placeholder', 'input-1', '', 'required', '', 'Value', 'Label Bottom', 'Label Top Secondary')

Component:

Color *Label Top Secondary

Label Bottom

Code:

.col-md-6
	+inputColor('Color', 'Placeholder', 'color-1', '', 'required', '', '#000000', 'Label Bottom', 'Label Top Secondary')

Component:

Password *Label Top Secondary

Label Bottom

Code:

.col-md-6
	+inputLink('password', 'Password', '•••••••••', 'input-4', 'form-group--no-divider', 'required', '', 'Value', 'iconView', 'Label Bottom', 'Label Top Secondary')

Component:

Textarea *Label Top Secondary

Label Bottom

Code:

.col-md-6
	+textarea('Textarea', 'Placeholder', 'textarea-1', '', 'required', '', 'Value', 'Label Bottom', 'Label Top Secondary')

Component:

RadioLabel Top Secondary

Yes

No

Unset

Label Bottom

Code:

.col-md-6
	+radioGroup('Radio', 'radio-1', ['Yes', 'No', 'Unset'], '', '', 'not-required', '', 'Label Bottom', 'Label Top Secondary')

Component:

CheckboxLabel Top Secondary

Option 1

Option 2

Option 3

Label Bottom

Code:

.col-md-6
	+checkboxGroup('Checkbox', 'checkbox-1', ['Option 1', 'Option 2', 'Option 3'], '', '', 'not-required', '', 'Label Bottom', 'Label Top Secondary')

Component:

Checkbox Single *Label Top Secondary

Checkbox Single

Label Bottom

Code:

.col-md-6
	+checkboxSingle('Checkbox Single', 'checkbox-2', 'Checkbox Single', '', '', 'Label Bottom', 'Label Top Secondary', 'mb-0')

Component:

Autocomplete *Label Top Secondary

Label Bottom

Code:

.col-md-6
	+autocomplete('Autocomplete', 'Placeholder', 'autocomplete-1', '', 'required', '', 'Value', 'Label Bottom', 'Label Top Secondary')

Component:

Autocomplete Settings *Label Top Secondary

Label Bottom

Code:

.col-md-6
	+autocompleteIcon('Autocomplete Settings', 'Placeholder', 'autocomplete-3', '', 'required', '', 'Value', 'iconSettings', 'Label Bottom', 'Label Top Secondary')

Component:

Autocomplete Link *Label Top Secondary

Label Bottom

Code:

.col-md-6
	+autocompleteIcon('Autocomplete Link', 'Placeholder', 'autocomplete-4', '', 'required', '', 'Value', 'iconLink', 'Label Bottom', 'Label Top Secondary')

Component:

Autocomplete Multiple Link *Label Top Secondary

Bottom Label

Code:

.col-md-6
	+autocompleteMultipleIcon('Autocomplete Multiple Link', 'Placeholder', 'autocomplete-6', '', 'required', '', 'Value', 'iconLink', 'Bottom Label', 'Label Top Secondary')

Component:

Autocomplete Multiple *Label Top Secondary

Label Bottom

Code:

.col-md-6
	+autocompleteMultiple('Autocomplete Multiple', 'Placeholder', 'autocomplete-2', '', 'required', '', 'Value', 'Label Bottom', 'Label Top Secondary')

Component:

Autocomplete Multiple Settings *Label Top Secondary

Label Bottom

Code:

.col-md-6
	+autocompleteMultipleIcon('Autocomplete Multiple Settings', 'Placeholder', 'autocomplete-5', '', 'required', '', 'Value', 'iconSettings', 'Label Bottom', 'Label Top Secondary')

Component:

Date *Label Top Secondary

Label Bottom

Code:

.col-md-6
	+datePicker('Date', 'date-1', '', 'required', '', 'Jan-09-2022', 'Label Bottom', 'Label Top Secondary')

Component:

Time *Label Top Secondary

Label Bottom

Code:

.col-md-6
	+timePicker('Time', 'time-1', '', 'required', '', '10:45 AM', 'Label Bottom', 'Label Top Secondary')

Component:

Date Time *Label Top Secondary

Label Bottom

Code:

.col-md-6
	+dateTimePicker('Date Time', 'date-time-1', '', 'required', '', 'Jan-09-2022 10:45 AM', 'Label Bottom', 'Label Top Secondary')

Component:

File *Label Top Secondary

Choose a file

or drag & drop it here

Supported file types are .jpg or .png
Max file size is 2 MB.

Sample Document.pdf

Label Bottom

Code:

+fileUpload('File', 'file-1', '', 'required', '', '', 'Label Bottom', 'Label Top Secondary')