Components

Badges

Badges are labels which hold small amounts of information.
SLDS Badge documentation.

Base

Badges are composed of text inside a span element and may include inline/inline-block elements and/or icons.

Badge Label 
{{> badge label="Badge Label" }}

Color

Badge Class Handlebars
Default Badge .slds-badge
Darker Badge .slds-badge_inverse badge_variant="slds-badge_inverse"
Lightest Badge .slds-badge_lightest badge_variant="slds-badge_lightest"
Success Badge .slds-theme_success badge_variant="slds-theme_success"
Warning Badge .slds-theme_warning badge_variant="slds-theme_warning"
Error Badge .slds-theme_error badge_variant="slds-theme_error"

Billing Address

Billing Address

123 Elm Street
Wilmington, DE 19901
USA
Change billing address 
{{> billing-address address1="123 Elm Street" city="Wilmington" state="DE" zip="19901" country="USA" }}

Buttons

Buttons use .slds-button .
SLDS button documentation.

Primary buttons

For primary buttons add .slds-button_brand .

{{> button-anchor label="Primary Button" variant="brand" }}
{{> button label="Primary Button" variant="brand" }}

Secondary buttons

For secondary buttons add .slds-button_outline-brand .

{{> button-anchor label="Secondary Button" variant="outline-brand" }}
{{> button label="Secondary Button" variant="outline-brand" }}

Fade buttons

For fade buttons add .slds-button_neutral .

{{> button-anchor label="Fade Button" variant="neutral" }}
{{> button label="Fade Button" variant="neutral" }}

Inverse buttons

For inverse buttons add .slds-button_inverse .

{{> button-anchor label="Inverse Button" variant="inverse" }}
{{> button label="Inverse Button" variant="inverse" }}

Link buttons

{{> button-anchor label="Link Button" }}
{{> button label="Link Button" }}

Destructive buttons

For destructive buttons add .slds-button_destructive .

{{> button-anchor label="Destructive Button" variant="destructive" }}
{{> button label="Destructive Button" variant="destructive" }}

Destructive text buttons

For destructive text buttons add .slds-button_text-destructive .

{{> button-anchor label="Destructive Text Button" variant="text-destructive" }}
{{> button label="Destructive Button" variant="text-destructive" }}

Small buttons

For a small button, apply button_sm class.

{{> button-anchor label="Small Button" variant="brand" size="sm" }}
{{> button label="Small Button" variant="brand" size="sm" }}

X-Small buttons

For an extra small button, apply button_xs class.

{{> button-anchor label="X-Small Button" variant="brand" size="xs" }}
{{> button label="X-Small Button" variant="brand" size="xs" }}

2X-Small buttons

For an extra-extra small button, apply button_2xs class.

{{> button-anchor label="2X-Small Button" variant="brand" size="2xs" }}
{{> button label="2X-Small Button" variant="brand" size="2xs" }}

Disabled buttons

Use a disabled attribute when a button can't be clicked. To create a disabled button, append the disabled attribute to the button. For links, apply the disabled class.

Icons

Icons provide visual context and enhance usability. Read more in the Iconography design guideline and for a full list of icons available, visit the Icons page.

{{> button label="Icon Right" variant="brand" icon_right="forward" }}
{{> button label="Icon Left" variant="brand" icon_left="download" }}

Checkbox

SLDS checkbox documentation.

Base

{{> checkbox label="Checkbox Label" name="options" id="checkbox_01" value="checkbox_01" checked="true" }}

Required

* 
{{> checkbox label="Checkbox Label" name="options" id="checkbox_02" value="checkbox_02" required="true" }}

Error

*
This field is required
{{> checkbox label="Checkbox Label" name="options" id="checkbox_03" value="checkbox_03" required="true" error="error_03" }}

Disabled

{{> checkbox label="Checkbox Label" name="options" id="checkbox_04" value="checkbox_04" disabled="true" }}

Disabled Checked

{{> checkbox label="Checkbox Label" name="options" id="checkbox_05" value="checkbox_05" disabled="true" checked="true" }}

Group

{{#> checkbox-group label="Checkbox Group Label" }}
  {{> checkbox label="Checkbox Label" name="options" id="checkbox_06" value="checkbox_06" checked="true" }}
  {{> checkbox label="Checkbox Label" name="options" id="checkbox_07" value="checkbox_07" }}
{{/checkbox-group }}

Icons

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Payment methods

{{> icon_payments type="mastercard | visa | amex | discover | ach" }}

Active payment methods

{{> icon_payments type="mastercard-active | visa-active | amex-active | discover-active | ach-active" }}

Input

The element includes support for all HTML5 types: text , password , datetime , datetime-local , date , month , time , week , number , email , url , search , tel , and color .
SLDS input documentation.

Base

{{> input label="Input Label" id="input_01" placeholder="Placeholder text…" }}

Disabled

{{> input label="Input Label" id="input_02" placeholder="Placeholder text…" disabled="true" }}

Error

Enter a value.
{{> input label="Input Label" id="input_03" placeholder="Placeholder text…" error="Enter a value." required="true" }}

Icon on left

{{> input label="Input Label" id="input_04" placeholder="Placeholder text…" icon_left="search" }}

Icon on right

{{> input label="Input Label" id="input_05" placeholder="Placeholder text…" icon_right="search" }}

Inline help

ex: (415)111-2222
{{> input label="Input Label" id="input_07" placeholder="Placeholder text…" help="ex: (415)111-2222" }}

Field level help

{{> input label="Input Label" id="input_07" placeholder="Placeholder text…" help="ex: (415)111-2222" }}

Textarea

{{> input label="Input Label" id="input_01" placeholder="Placeholder text…" }}

Input Custom

The element includes support for all HTML5 types: text , password , datetime , datetime-local , date , month , time , week , number , email , url , search , tel , and color .
SLDS input documentation.

Base

{{> input-gode label="Input Label" id="input_c_01" placeholder="Placeholder text…" }}

Disabled

{{> input-gode label="Input Label" id="input_c_02" placeholder="Placeholder text…" disabled="true" }}

Required

{{> input-gode label="Input Label" id="input_c_09" placeholder="Placeholder text…" required="true" }}

Optional

{{> input-gode label="Input Label" id="input_c_10" placeholder="Placeholder text…" optional="true" }}

Error

Enter a value.
{{> input-gode label="Input Label" id="input_c_03" placeholder="Placeholder text…" error="Enter a value." required="true" }}

Icon on left

{{> input-gode label="Input Label" id="input_c_04" placeholder="Placeholder text…" icon_left="search" }}

Icon on right

{{> input-gode label="Input Label" id="input_c_05" placeholder="Placeholder text…" icon_right="search" }}

Inline help

ex: (415)111-2222
{{> input-gode label="Input Label" id="input_c_07" placeholder="Placeholder text…" help="ex: (415)111-2222" }}

Field level help

{{> input-gode label="Input Label" id="input_c_08" placeholder="Placeholder text…" help="ex: (415)111-2222" }}

Credit Card

{{> input-gode label="Card number" id="input_c_11" type="num" placeholder="1234 1234 1234 1234" cards="true" }}

Mastercard active

{{> input-gode label="Card number" id="input_c_12" type="num" placeholder="1234 1234 1234 1234" cards="true" mastercard="true" }}

Visa active

{{> input-gode label="Card number" id="input_c_13" type="num" placeholder="1234 1234 1234 1234" cards="true" visa="true" }}

Amex active

{{> input-gode label="Card number" id="input_c_14" type="num" placeholder="1234 1234 1234 1234" cards="true" amex="true" }}

Discover active

{{> input-gode label="Card number" id="input_c_15" type="num" placeholder="1234 1234 1234 1234" cards="true" discover="true" }}

Logos

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Base

{{> logo-gode width="79" height="68" }}

Ghost

{{> logo-gode type="ghost" width="79" height="68" }}

Tagline

{{> logo-gode type="tagline" width="215" height="56" }}

Agency Logos

Delware Courts

{{> logo-agencies logo_agency="courts" alt="Courts logo" }}

DelDOT

{{> logo-agencies logo_agency="deldot" alt="DelDOT logo" }}

DHS

{{> logo-agencies logo_agency="dhs" alt="DHS logo" }}

DNREC

{{> logo-agencies logo_agency="dnrec" alt="DNREC logo" }}

DOL

{{> logo-agencies logo_agency="dol" alt="DOL logo" }}

One Stop

{{> logo-agencies logo_agency="onestop" alt="One Stop logo" }}

Revenue

{{> logo-agencies logo_agency="revenue" alt="Revenue logo" }}

Modals

SLDS input documentation.

Base

{{#> modal modal_title="Modal Title" id="modal-01" footer="true" cancel_button="Cancel" primary_button="Save" primary_variant="brand" }}
  <p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. Cillum sunt ad dolore quis aute consequat ipsum magna exercitation reprehenderit magna. Tempor cupidatat consequat elit dolor adipisicing.</p>
  <p>Dolor eiusmod sunt ex incididunt cillum quis nostrud velit duis sit officia. Lorem aliqua enim laboris do dolor eiusmod officia. Mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident. Eiusmod et adipisicing culpa deserunt nostrud ad veniam nulla aute est. Labore esse esse cupidatat amet velit id elit consequat minim ullamco mollit enim excepteur ea.</p>
{{/modal }}

Progress indicator

SLDS input documentation.

Base

{{#> progress }}
  {{> progress-item complete="true" label="Payment Method"}}
  {{> progress-item active="true" label="Review & Pay"}}
  {{> progress-item label="Payment Complete"}}
{{/progress }}

Popover

SLDS input documentation.

Base

{{#> popover id="popover-01" nub_position="bottom-right"}}
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
{{/popover }}

Bottom Left

{{#> popover id="popover-02" nub_position="bottom-left"}}
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
{{/popover }}

Bottom Center

{{#> popover id="popover-03" nub_position="bottom"}}
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
{{/popover }}

CCV

{{#> popover popover_title="Security Code" nub_position="bottom-right"}}
  <p>For Visa and MasterCard (left), the 3 digits on the back of your card. For American Express (right), the 4 digits on the front of your card.</p>
  <img src="/assets/img/card-security-codes.png" width="212" height="62" alt="Card security code samples" />
{{/popover }}

Radio Button Group

SLDS input documentation.

Base

Radio Group Label 
{{#> radio-button-group group-id="radio-button-group-01" label="Radio Group Label" }}
  {{> radio-button id="radio-button-01" value="monday" label="Mon" checked="true" }}
  {{> radio-button id="radio-button-02" value="tuesday" label="Tue" }}
  {{> radio-button id="radio-button-03" value="wednesday" label="Wed" }}
  {{> radio-button id="radio-button-04" value="thursday" label="Thu" }}
  {{> radio-button id="radio-button-05" value="friday" label="Fri" }}
{{/radio-button-group }}

Large

Radio Group Label 
{{#> radio-button-group group-id="radio-button-group-02" label="Radio Group Label" large="true" }}
  {{> radio-button id="radio-button-101" value="monday" label="Mon" checked="true" }}
  {{> radio-button id="radio-button-102" value="tuesday" label="Tue" }}
  {{> radio-button id="radio-button-103" value="wednesday" label="Wed" }}
  {{> radio-button id="radio-button-104" value="thursday" label="Thu" }}
  {{> radio-button id="radio-button-105" value="friday" label="Fri" }}
{{/radio-button-group }}

Review

NOTE: Custom component.

Base

Label
Value 
{{> review label="Label" value="Value" }}

Small

Label
Value 
{{> review label="Label" value="Value" size="sm" }}

Large

Used for totals.
Total
$42.00 
{{> review label="Total" value="$42.00" size="lg" }}

X-Large

Used for totals.
Total
$42.00 
{{> review label="Total" value="$42.00" size="xl" }}

Stacked

Label
Value 
{{> review label="Label" value="Value" stacked="true" }}

Payment Method

Payment Method

Mastercard ending 1234

Expires MM/YY 

{{> review label="Payment Method" stacked="true" payment-method="Mastercard" number="1234" exp="MM/YY" payment_icon="mastercard" }}

Address

Billing Address
123 Elm Street
Wilmington, DE 19901
USA
{{> review label="Billing Address" stacked="true" address="true" address1="123 Elm Street" city="Wilmington" state="DE" zip="19901" country="USA" }}

Payment

Expires:
04/28
Name on Card:
Stephen Michaels
Billing Address:
123 Elm Street
Wilmington, DE 19901 
{{>  }}

Transaction

Transaction Number
1234567890
Transaction Date
01/02/2023 10:52:52 AM 
{{>  }}

Select

SLDS input documentation.

Base

{{#> select label="Select Label" id="select-01"}}
  <option value="">Select…</option>
  <option>Option One</option>
  <option>Option Two</option>
  <option>Option Three</option>
{{/select }}

Error

Select an option.
{{#> select label="Select Label" id="select-02" error="Select an option." required="true"}}
  <option value="">Select…</option>
  <option>Option One</option>
  <option>Option Two</option>
  <option>Option Three</option>
{{/select }}

Disabled

{{#> select label="Select Label" id="select-03" disabled="true"}}
  <option value="">Select…</option>
  <option>Option One</option>
  <option>Option Two</option>
  <option>Option Three</option>
{{/select }}

Tabs

SLDS input documentation.

Base

Item One Content
Item Two Content
Item Three Content