Select a title

UI Toolkit

v3.1.5

Components

A general set of UI components for use across all Zero Deposit platforms.

For components specific to internal business tooling see the Tooling Components section.

Button

Buttons trigger an action.

The can be either an html anchor a tag or a button tag. The latter needs to either submit a form of have a JavaScript event handler.

Intent

Buttons can be modified to indicate intent by adding the appropriate class, if no modifier class is added, the default button styling will be applied. The primary colour will change depending on the theme applied to the html element of the document, to force the colour to be the default primary colour, use Button--primary-forced.

Modifier classes are: Button--primary, Button--primary-forced, Button--tertiary, Button--tenants, Button--agents

Example

Link

Sizes

Buttons can be made larger or smaller than the default with the Button--large, Button--small and Button--span modifiers.

Example

Temporary new size modifiers:

Buttons can be made larger or smaller than the default with the Button--s, Button--m, Button--l and Button--xl modifiers.

Example

Disabling

Buttons can be disabled. If it is an a element add the .is-disabled class. If it is a button element add the disabled attribute.

Example

Enabled anchor

Disabled anchor

Button Icons

Any icons from the Icon font can be added to a button by simply adding the icon's class to the button itself.

Example

<button class="Button Button--primary Icons-search">Search</button>
<button class="Button Button--primary Icons-settings">Settings</button>
<button class="Button Button--primary Icons-help">Help</button>

Secondardy breadcrumb navigation to show user's current position within the application.

Example

<ul class="BreadcrumbList">
<li class="BreadcrumbList-item"><a href="#/home">Home</a></li>
<li class="BreadcrumbList-item"><a href="#/home/products">Products</a></li>
<li class="BreadcrumbList-item"><span>Product item</span></li>
</ul>

<a href=//www.google.com class="Link">Example link

Links that are only clickable on touch devices.

01234 987654 01234 987654

<a href=//www.google.com class="Link">Example link</a>
<span class="PhoneLink">
  <span>01234 987654</span>
  <a href="tel:01234 987654">01234 987654</a>
</span>

Progress Step

Step
1
/ 5
ADMIN FEE CONFIRMATION

<div class="ProgressStep">
<div class="ProgressStep-label">
  Step
</div>
<div class="ProgressStep-position">
  1
</div>
<div class="ProgressStep-total">
  / 5
</div>
</div>

Icons

Automatically generated icon font from SVGs in this repository. Easy to use and can be resized and styled with CSS.

List of available icons

Example

<i class="Icons-help"></i>

Tooltips

Tooltips activated on mouseover/tap. Tooltips can contain any type of element within. For all elements except input elements, they will be activated on hover (tap on touch devices), for input elements they will be activated on focus.

By default the tooltips are positioned top/centre, you can change this with the following modifiers: Tooltip--left, Tooltip--right, Tooltip--bottom

Example


<div class="Tooltip" data-tooltip="It&#39;s a tooltip!">
<i class="Icons-help"></i>
</div>

<div class="Tooltip Tooltip--bottom Tooltip--left" data-tooltip="Tip related to input">
<div class="Input Icons-search--after">
<div class="Input-field">
  <input class="Input-input" type="text" name="input_example_2" id="input_example_2" value="" placeholder="Search">
  <label class="Input-label" for="input_example_2">Search</label>
  <div class="Input-border"></div>
</div>
</div>

</div>

<div class="Tooltip" data-tooltip="Clicking this will do something incredible">
<button class="Button Button--primary">Go!</button>
</div>

Form Controls

Standard set of controls for form inputs.

Input

Text input fields.

Simple text input

<div class="Input">
  <div class="Input-field">
    <input class="Input-input" type="text" name="input_example_1" id="input_example_1" value="" placeholder="Enter text">
    <label class="Input-label" for="input_example_1">Enter text</label>
    <div class="Input-border"></div>
  </div>
  <div class="Input-helpers" data-error="" data-hint=""></div>
</div>

Disabled/Presentational inputs

To present a users input back to them and for for disabled inputs, add the disabled attribute to the .Input-input element. You should also add the .is-disabled class to the top level .Input element.

For presenting user data back to the user, add .Input--present to the top level element to make the text darker and border lighter.

  <div class="Input u-block is-disabled">
    <div class="Input-field">
      <input class="Input-input" type="text" name="input_disabled_" id="input_disabled_" value="" placeholder="Enter text" disabled>
      <label class="Input-label" for="input_disabled_">Enter text</label>
      <div class="Input-border"></div>
    </div>
    <div class="Input-helpers" data-error="" data-hint=""></div>
  </div>

Inputs with units

To add a unit to the input, add a class like Input--unit-pound to the .Input element. Available units are percent, pound, dollar and euro.

<div class="Input Input--unit-percent">
  <div class="Input-field">
    <input class="Input-input" type="text" name="input_example_unit_1" id="input_example_unit_1" value="" placeholder="Enter share">
    <label class="Input-label" for="input_example_unit_1">Enter share</label>
    <div class="Input-border"></div>
  </div>
  <div class="Input-helpers" data-error="" data-hint=""></div>
</div>

Inputs with icons

To add icons to an input field, simply add the Icons-* class for the icon you wish to add.

<div class="Input Icons-calendar">
  <div class="Input-field">
    <input class="Input-input" type="date" name="input_example_3" id="input_example_3" value="" placeholder="Enter date">
    <label class="Input-label" for="input_example_3">Enter date</label>
    <div class="Input-border"></div>
  </div>
  <div class="Input-helpers" data-error="" data-hint=""></div>
</div>
<div class="Input Icons-search">
  <div class="Input-field">
    <input class="Input-input" type="text" name="input_example_2" id="input_example_2" value="" placeholder="Search">
    <label class="Input-label" for="input_example_2">Search</label>
    <div class="Input-border"></div>
  </div>
  <div class="Input-helpers" data-error="" data-hint=""></div>
</div>

Spanning the containing element

Spanning container

<div class="Input Input--span">
  <div class="Input-field">
    <input class="Input-input" type="text" name="input_example_6" id="input_example_6" value="" placeholder="Enter text">
    <label class="Input-label" for="input_example_6">Enter text</label>
    <div class="Input-border"></div>
  </div>
  <div class="Input-helpers" data-error="" data-hint=""></div>
</div>
<div class="Input Input--span">
  <div class="Input-field">
    <input class="Input-input" type="text" name="input_example_7" id="input_example_7" value="" placeholder="Enter text">
    <label class="Input-label" for="input_example_7">Label for input</label>
    <div class="Input-border"></div>
  </div>
  <div class="Input-helpers" data-error="" data-hint=""></div>
</div>

Messaging helpers (errors and hints)

To show an error, just add the is-error CSS modifier. Messages can be added for errors and hints by populating the data-error or data-hint attributes on the Input-helpers element.

If both data-error and data-hint have values, the error will only be shown when the .is-error class modifier is added to the top level element.

<div class="Input is-error">
  <div class="Input-field">
    <input class="Input-input" type="text" name="input_example_1" id="input_example_1" value="" placeholder="Enter text">
    <label class="Input-label" for="input_example_1">Enter text</label>
    <div class="Input-border"></div>
  </div>
  <div class="Input-helpers" data-error="You need to fill in this field." data-hint=""></div>
</div>
<div class="Input Input-hiviz is-error u-block">
  <div class="Input-field">
    <input class="Input-input" type="text" name="input_example_1" id="input_example_1" value="" placeholder="Enter text">
    <label class="Input-label" for="input_example_1">Enter text</label>
    <div class="Input-border"></div>
  </div>
  <div class="Input-helpers" data-error="You need to fill in this field." data-hint=""></div>
</div>
<div class="Input">
  <div class="Input-field">
    <input class="Input-input" type="email" name="input_example_1" id="input_example_1" value="" placeholder="Enter text">
    <label class="Input-label" for="input_example_1">Enter text</label>
    <div class="Input-border"></div>
  </div>
  <div class="Input-helpers" data-error="" data-hint="Passwords should be at least 6 characters and contain letters and numbers"></div>
</div>

Input Datepicker

Date input field with optional datepicker.

To enable the datepicker add the class .Input--datepicker to the main .Input element.

Default year range is from 1900 - 2100, to specify min/max dates add min and max attributes to the input element in yyyy-mm-dd format. This matches the HTML5 spec, which will be implemented on touch devices. On desktop/non-touch/non-supporting devices, a custom datepicker is used.

To just set a year range set the min date to yyyy-01-01 and max to yyyy-12-31.

To initialise a date input that's been added to the DOM at runtime

const datepicker = new zd.InputDatePicker($('#newpickerID'))

  <div class="Input">
    <div class="Input-field">
      <input class="Input-input" type="date" name="input_example_datepicker_" id="input_example_datepicker_" placeholder="Date of birth (DD/MM/YYYY)" min="1977-03-04" max="2020-01-01" value="">
      <label class="Input-label" for="input_example_datepicker_">Date of birth</label>
      <div class="Input-border"></div>
    </div>
    <div class="Input-helpers" data-error="" data-hint=""></div>
  </div>

Input Date Entry

A wrapper for a single date input that splits day, month and year into separate fields to simplify input for users.


Any .Input with the class .Input--dateentry will be auto-initialised either on page load or when dynamically added to the DOM.

  <div class="Input Input--dateentry">
    <div class="Input-field">
      <input class="Input-input" type="date" name="dateentry_example_" id="dateentry_example_" placeholder="Date of birth (DD/MM/YYYY)" value="">
      <label class="Input-label" for="dateentry_example_">Date of birth</label>
      <div class="Input-border"></div>
    </div>
    <div class="Input-helpers" data-error="" data-hint=""></div>
  </div>

Number Stepper

<div class="NumberStepper">
  <button class="NumberStepper-dn Icons-expand-up"></button>
  <input type="number" class="NumberStepper-value" value="1" min="-1" max="10">
  <button class="NumberStepper-up Icons-expand-down"></button>
</div>

Select

Select menu

Select an option

<div class="Select">
  <div class="Select-field">
    <div class="Select-container">
      <div class="Select-value">Select an option</div>
      <select class="Select-select" name="example_select" id="example_select">
        <option value="">Select an option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
        <option value="5">Option 5</option>
      </select>
      <label class="Select-label" for="example_select"></label>
      <div class="Select-border"></div>
    </div>
  </div>
  <div class="Select-helpers" data-error="" data-hint=""></div>
</div>

Disabled/Presentational inputs

To present a users select back to them, or for disabled selects, add the disabled attribute to the .Select-select element.

Select an option

<div class="Select">
  <div class="Select-field">
    <div class="Select-container">
      <div class="Select-value">Select an option</div>
      <select class="Select-select" name="example_select_disabled" id="example_select_disabled" disabled>
        <option value="">Select an option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
        <option value="5">Option 5</option>
      </select>
      <label class="Select-label" for="example_select_disabled">Select label</label>
      <div class="Select-border"></div>
    </div>
  </div>
  <div class="Select-helpers" data-error="" data-hint=""></div>
</div>

Spanning the containing element

Spanning container

Select an option

<div class="Select Select--span">
  <div class="Select-field">
    <div class="Select-container">
      <div class="Select-value">Select an option</div>
      <select class="Select-select" name="example_select_3" id="example_select_3">
        <option value="">Select an option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
        <option value="5">Option 5</option>
      </select>
      <label class="Select-label" for="example_select_3">Select label</label>
      <div class="Select-border"></div>
    </div>
  </div>
  <div class="Select-helpers" data-error="" data-hint=""></div>
</div>

Messaging helpers (errors and hints)

To show an error, just add the is-error CSS modifier. Messages can be added for errors and hints by populating the data-error or data-hint attributes on the Select-helpers element.

If both data-error and data-hint have values, the error will only be shown when the .is-error class modifier is added to the top level element.

Select an option
Select an option
Select an option

<div class="Select is-error u-block">
  <div class="Select-field">
    <div class="Select-container">
      <div class="Select-value">Select an option</div>
      <select class="Select-select" name="example_select" id="example_select">
        <option value="">Select an option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
        <option value="5">Option 5</option>
      </select>
      <label class="Select-label" for="example_select">Select label</label>
      <div class="Select-border"></div>
    </div>
  </div>
  <div class="Select-helpers" data-error="You must choose a value" data-hint=""></div>
</div>
<div class="Select Select-hiviz is-error u-block">
  <div class="Select-field">
    <div class="Select-container">
      <div class="Select-value">Select an option</div>
      <select class="Select-select" name="example_select" id="example_select">
        <option value="">Select an option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
        <option value="5">Option 5</option>
      </select>
      <label class="Select-label" for="example_select">Select label</label>
      <div class="Select-border"></div>
    </div>
  </div>
  <div class="Select-helpers" data-error="You must choose a value" data-hint=""></div>
</div>
<div class="Select u-block">
  <div class="Select-field">
    <div class="Select-container">
      <div class="Select-value">Select an option</div>
      <select class="Select-select" name="example_select" id="example_select">
        <option value="">Select an option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
        <option value="5">Option 5</option>
      </select>
      <label class="Select-label" for="example_select">Select label</label>
      <div class="Select-border"></div>
    </div>
  </div>
  <div class="Select-helpers" data-error="" data-hint="Choose any value"></div>
</div>

TextArea

Text area with optional label and caption for free text input. Textareas are initially displayed on a single line and expand automatically as the user enters content.

Simple textarea

<div class="TextArea">
  <div class="TextArea-field">
    <textarea class="TextArea-textarea" name="example_text_box" id="example_text_box" placeholder="Enter your message" rows="1"></textarea>
    <label class="TextArea-label" for="example_text_box">Message</label>
    <div class="TextArea-border"></div>
  </div>
  <div class="TextArea-helpers" data-error="" data-hint=""></div>
</div>

Disabled/Presentational textareas

To present a users textarea text back to them, or for disabled textareas, add the disabled attribute to the .TextArea-textarea element.

<div class="TextArea">
  <div class="TextArea-field">
    <textarea class="TextArea-textarea" name="example_text_box_disabled" id="example_text_box_disabled" placeholder="Enter your message" disabled rows="1">Lorem
Ipsum
Dolor
Sit
Amet...</textarea>
    <label class="TextArea-label" for="example_text_box_disabled">Message</label>
    <div class="TextArea-border"></div>
  </div>
  <div class="TextArea-helpers" data-error="" data-hint=""></div>
</div>

Spanning container

<div class="TextArea TextArea--span">
  <div class="TextArea-field">
    <textarea class="TextArea-textarea" name="example_text_box" id="example_text_box" placeholder="Enter your message" rows="1"></textarea>
    <label class="TextArea-label" for="example_text_box">Message</label>
    <div class="TextArea-border"></div>
  </div>
  <div class="TextArea-helpers" data-error="" data-hint=""></div>
</div>

Messaging helpers (errors and hints)

To show an error, just add the is-error CSS modifier. Messages can be added for errors and hints by populating the data-error or data-hint attributes on the TextArea-helpers element.

If both data-error and data-hint have values, the error will only be shown when the .is-error class modifier is added to the top level element.

<div class="TextArea is-error">
  <div class="TextArea-field">
    <textarea class="TextArea-textarea" name="example_text_area" id="example_text_area" placeholder=" " rows="1"></textarea>
    <label class="TextArea-label" for="example_text_area">TextArea label</label>
    <div class="TextArea-border"></div>
  </div>
  <div class="TextArea-helpers" data-error="You must enter a message" data-hint=""></div>
</div>
<div class="TextArea TextArea-hiviz is-error">
  <div class="TextArea-field">
    <textarea class="TextArea-textarea" name="example_text_area" id="example_text_area" placeholder=" " rows="1"></textarea>
    <label class="TextArea-label" for="example_text_area">TextArea label</label>
    <div class="TextArea-border"></div>
  </div>
  <div class="TextArea-helpers" data-error="You must enter a message" data-hint=""></div>
</div>
<div class="TextArea">
  <div class="TextArea-field">
    <textarea class="TextArea-textarea" name="example_text_area" id="example_text_area" placeholder=" " rows="1"></textarea>
    <label class="TextArea-label" for="example_text_area">TextArea label</label>
    <div class="TextArea-border"></div>
  </div>
  <div class="TextArea-helpers" data-error="" data-hint="Press keys to type words!"></div>
</div>

Checkbox

Checkbox input

Example

<div class="CheckBox">
  <input class="CheckBox-input" type="checkbox" name="example_checkbox" id="example_checkbox1" value="1" />
  <label class="CheckBox-label" for="example_checkbox1">Example Check Box</label>
  <div class="CheckBox-helpers" data-error="" data-hint=""></div>
</div>

Messaging helpers (errors and hints)

To show an error, just add the is-error CSS modifier. Messages can be added for errors and hints by populating the data-error or data-hint attributes on the CheckBox-helpers element.

If both data-error and data-hint have values, the error will only be shown when the .is-error class modifier is added to the top level element.

<div class="CheckBox is-error">
  <input class="CheckBox-input" type="checkbox" name="example_checkbox_error" id="example_checkbox_error1" value="1" />
  <label class="CheckBox-label" for="example_checkbox_error1">Terms and conditions</label>
  <div class="CheckBox-helpers" data-error="You must agree to the terms and conditions" data-hint=""></div>
</div>
<div class="CheckBox">
  <input class="CheckBox-input" type="checkbox" name="example_checkbox_hint" id="example_checkbox_hint2" value="2" />
  <label class="CheckBox-label" for="example_checkbox_hint2">Terms and conditions</label>
  <div class="CheckBox-helpers" data-error="Error text" data-hint="Please agree"></div>
</div>

Radio

Radio input

Example

<div class="Radio">
  <input class="Radio-input" type="radio" name="exmple_radio" id="exmple_radio1" value="1" data-showtext="" />
  <label class="Radio-label" for="exmple_radio1">Example Check Box</label>
</div>

Messaging helpers (errors and hints)

To show an error, just add the is-error CSS modifier. Messages can be added for errors and hints by populating the data-error or data-hint attributes on the CheckBox-helpers element.

If both data-error and data-hint have values, the error will only be shown when the .is-error class modifier is added to the top level element.

<div class="Radio is-error">
  <input class="Radio-input" type="radio" name="example_radio_error" id="example_radio_error1" value="1" data-showtext="" />
  <label class="Radio-label" for="example_radio_error1">Terms and conditions</label>
</div>
<div class="Radio">
  <input class="Radio-input" type="radio" name="example_radio_hint" id="example_radio_hint2" value="2" data-showtext="" />
  <label class="Radio-label" for="example_radio_hint2">Terms and conditions</label>
</div>

Radio Group

Grouped control for input[type=radio] controls. Offers a single error/helper for the group.

Example 1

Messaging helpers (errors and hints)

To show an error, just add the is-error CSS modifier. Messages can be added for errors and hints by populating the data-error or data-hint attributes on the RadioGroup-helpers element.

If both data-error and data-hint have values, the error will only be shown when the .is-error class modifier is added to the top level element.

<div class="RadioGroup is-error">
  <div class="RadioGroup-controls">
    <div class="Radio">
  <input class="Radio-input" type="radio" name="radio_group" id="radio_groupagents" value="agents" data-showtext="" />
  <label class="Radio-label" for="radio_groupagents">Agents</label>
</div>

    <div class="Radio">
  <input class="Radio-input" type="radio" name="radio_group" id="radio_grouplandlords" value="landlords" data-showtext="" />
  <label class="Radio-label" for="radio_grouplandlords">Landlords</label>
</div>

    <div class="Radio">
  <input class="Radio-input" type="radio" name="radio_group" id="radio_grouptentants" value="tentants" data-showtext="" />
  <label class="Radio-label" for="radio_grouptentants">Tenants</label>
</div>

  </div>
  <div class="RadioGroup-helpers" data-error="Error! You must choose one." data-hint="Some hint text"></div>
</div>
Example with a question and conditional showing of text well:
<div class="RadioGroup is-conditional">
  <div class="RadioGroup-controls">
    <div class="Radio">
  <input class="Radio-input" type="radio" name="radio_conditional" id="radio_conditional1-3 months" value="1-3 months" data-showtext="You may want to consider a traditional deposit instead." checked=checked/>
  <label class="Radio-label" for="radio_conditional1-3 months">1-3 months</label>
</div>

    <div class="Radio">
  <input class="Radio-input" type="radio" name="radio_conditional" id="radio_conditional3-6 months" value="3-6 months" data-showtext="You may want to consider a traditional deposit instead." />
  <label class="Radio-label" for="radio_conditional3-6 months">3-6 months</label>
</div>

    <div class="Radio">
  <input class="Radio-input" type="radio" name="radio_conditional" id="radio_conditional1 year or more" value="1 year or more" data-showtext="" />
  <label class="Radio-label" for="radio_conditional1 year or more">1 year or more</label>
</div>

  </div>
    <div class="TextWell TextWell--hidden">  </div>
</div>

File Input

File Input field for file uploads.

Example

No file chosen

<div class="FileInput">
  <input class="FileInput-input" type="file" name="file_input_example" id="file_input_example" value="" />
  <label for="file_input_example" class="FileInput-button FileInput-button--primary Icons-file">Select file</label>
  <div class="FileInput-filename">No file chosen</div>
</div>

Form Group

Box container for grouping sets of form elements together.

Your details
Select a title

Tab Group

Controlled tab groups that will dispatch a jQuery event named tabGroup:change when a tab is selected.

If a child element .TabGroup-contents exists the TabGroup will switch contents for each each tab when clicked. This is determined by the id of the tab content and each tab should have a respective data-target attribute. See example for more detail.

Tab 1
Another tab
Fourth

Tab 1

90's mustache cray shaman skateboard. Listicle sriracha gochujang, gentrify cold-pressed organic food truck celiac quinoa craft beer wolf keffiyeh ennui tilde pabst. Quinoa umami actually selfies aesthetic post-ironic iceland meggings try-hard la croix.

Tab 2

Kitsch master cleanse drinking vinegar actually humblebrag authentic pinterest letterpress squid mustache hashtag. Fixie raw denim jean shorts, bicycle rights cold-pressed cloud bread four dollar toast kale chips chillwave brooklyn church-key flexitarian la croix. Lomo umami neutra chicharrones intelligentsia fam dreamcatcher humblebrag chia. Schlitz vape semiotics wolf mustache typewriter, bushwick forage.

Tab 3

Cred lyft asymmetrical hoodie, pitchfork hot chicken copper mug coloring book sustainable. Crucifix bitters gluten-free raclette trust fund, pour-over bushwick yr cornhole poke semiotics gochujang umami snackwave.

Tab 4

Normcore yr farm-to-table try-hard. Kale chips kinfolk beard bushwick pitchfork PBR&B subway tile chillwave tote bag viral heirloom. Photo booth shoreditch godard, 90's lomo authentic la croix pug poke microdosing health goth skateboard scenester.

Markup

<div class="TabGroup js-tab-group-example">
<div class="TabGroup-tabs">
  <div data-target="tab_example_1" class="TabGroup-tab is-current">Tab 1</div>
  <div data-target="tab_example_2" class="TabGroup-tab Icons-calendar--after">Another tab</div>
  <div data-target="tab_example_3" class="TabGroup-tab Icons-search">A third tab with a long label</div>
  <div data-target="tab_example_4" class="TabGroup-tab">Fourth</div>
</div>
<div class="TabGroup-contents">
  <div class="TabGroup-content is-current" id="tab_example_1">
    <h4>Tab 1</h4>
    <p>90's mustache cray shaman skateboard. Listicle sriracha gochujang, gentrify cold-pressed organic food truck celiac quinoa craft beer wolf keffiyeh ennui tilde pabst. Quinoa umami actually selfies aesthetic post-ironic iceland meggings try-hard la croix.</p>
  </div>
  <div class="TabGroup-content" id="tab_example_2">
    <h4>Tab 2</h4>
    <p>Kitsch master cleanse drinking vinegar actually humblebrag authentic pinterest letterpress squid mustache hashtag. Fixie raw denim jean shorts, bicycle rights cold-pressed cloud bread four dollar toast kale chips chillwave brooklyn church-key flexitarian la croix. Lomo umami neutra chicharrones intelligentsia fam dreamcatcher humblebrag chia. Schlitz vape semiotics wolf mustache typewriter, bushwick forage.</p>
  </div>
  <div class="TabGroup-content" id="tab_example_3">
    <h4>Tab 3</h4>
    <p>Cred lyft asymmetrical hoodie, pitchfork hot chicken copper mug coloring book sustainable. Crucifix bitters gluten-free raclette trust fund, pour-over bushwick yr cornhole poke semiotics gochujang umami snackwave.</p>
  </div>
  <div class="TabGroup-content" id="tab_example_4">
    <h4>Tab 4</h4>
    <p>Normcore yr farm-to-table try-hard. Kale chips kinfolk beard bushwick pitchfork PBR&amp;B subway tile chillwave tote bag viral heirloom. Photo booth shoreditch godard, 90's lomo authentic la croix pug poke microdosing health goth skateboard scenester.</p>
  </div>
</div>
</div>

Javascript for event handlers

$('.js-tab-group-example').on('tabGroup:change', (e, data) => {
console.log(e, data)
})

The event will return both a generic event and a data object which will provide the index of the selected tab and a reference to the current tab element selected.

{
index: 0,
currentTab: <HTMLElement>
}

Text Reveal

Expand me to read more details
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<div class="TextReveal">
<div class="TextReveal-cta">
  Expand me to read more details
</div>
<div class="TextReveal-content-wrap">
  <div class="TextReveal-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>
</div>

Text Well

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<div class="TextWell"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>

Filter Group

Grouped buttons. These are actually input[type=radio] under the surface.

Markup

<div class="FilterGroup js-filter-group-example">
<div class="FilterGroup-item">
  <input class="FilterGroup-input" type="radio" name="filterGroupName" value="1" id="filterGroupName_1">
  <label class="FilterGroup-label" for="filterGroupName_1">Option 1</label>
</div>
<div class="FilterGroup-item">
  <input class="FilterGroup-input" type="radio" name="filterGroupName" value="2" id="filterGroupName_2">
  <label class="FilterGroup-label" for="filterGroupName_2">Option 2</label>
</div>
</div>

Javascript for event handlers

$('.js-filter-group-example').on('filterGroup:change', (e, data) => {
console.log(e, data)
})

The event will return both a generic event and a data object which will provide the currentTarget element and the value of the chosen item.

{
currentTarget: <HTMLElement>,
value: ;
}

<div class="NavigationList">
  <div class="NavigationList-button">
    Navigation Menu
  </div>
  <ul class="NavigationList-items">
    <li><a>Navigation item 1</a></li>
    <li><a>Navigation item 2</a></li>
    <li><a>Navigation item 3</a></li>
    <li><a>Navigation item 4</a></li>
  </ul>
</div>

Document Icons

Document Icons ready for download by tenants or agents

Example

<div class="DocumentIcons u-push-2">
  <a class="DocumentIcons-item" href="#">
    <i class="Svg Svg-document-tenants"></i>
    <div class="DocumentIcons-label">Label</div>
  </a>
  <a class="DocumentIcons-item" href="#">
    <i class="Svg Svg-document-tenants"></i>
    <div class="DocumentIcons-label">Label</div>
  </a>
</div>