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.
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.
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
Buttons can be made larger or smaller than the default with the Button--large, Button--small and Button--span modifiers.
Buttons can be made larger or smaller than the default with the Button--s, Button--m, Button--l and Button--xl modifiers.
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.
Any icons from the Icon font can be added to a button by simply adding the icon's class to the button itself.
<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.
<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>
<div class="ProgressStep">
<div class="ProgressStep-label">
Step
</div>
<div class="ProgressStep-position">
1
</div>
<div class="ProgressStep-total">
/ 5
</div>
</div>
Automatically generated icon font from SVGs in this repository. Easy to use and can be resized and styled with CSS.
<i class="Icons-help"></i>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
<div class="Tooltip" data-tooltip="It'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>
Standard set of controls for form inputs.
Text input fields.
<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>
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>
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>
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 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>
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>
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>
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>
<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 menu
<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>
To present a users select back to them, or for disabled selects, add the disabled attribute to the .Select-select element.
<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 container
<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>
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.
<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>
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.
<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>
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>
<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>
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 input
<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>
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 input
<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>
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>
Grouped control for input[type=radio] controls. Offers a single error/helper
for the group.
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><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>At some point we added a new radio group component in the tenant journey.
<h4 class="u-bold">How do you want to pay?</h4>
<div class="QuoteRadioGroup">
<div class="QuoteRadioGroup-controls">
<div class="QuoteRadio">
<div class="QuoteRadio-radio">
<input class="QuoteRadio-input" type="radio" name="payment-choice" autocomplete="off">
<label class="QuoteRadio-label">Now</label>
</div>
<div class="QuoteRadio-text">Pay today: £249</div>
</div>
<div class="QuoteRadio">
<div class="QuoteRadio-radio">
<input class="QuoteRadio-input" type="radio" autocomplete="off">
<label class="QuoteRadio-label">Monthly</label>
</div>
<div class="QuoteRadio-text">Pay today: £25</div>
</div>
</div>
</div>
File Input field for file uploads.
<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>
Box container for grouping sets of form elements together.
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.
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.
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.
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.
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&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>
}
<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>
<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>
<div class="TextWellCard">
<div class="TextWellCard-title">
Pay Now
</div>
<div class="TextWellCard-row">
<div class="TextWellCard-row--left-content">
Setup fee:
</div>
<div class="TextWellCard-row--right-content">
£12
</div>
</div>
<div class="TextWellCard-footer">
Then £2 per month
</div>
</div>
<div class="TextWellCardGroup">
<div class="TextWellCard">
<div class="TextWellCard-title">
Pay Now
</div>
<div class="TextWellCard-row">
<div class="TextWellCard-row--left-content">
Setup fee:
</div>
<div class="TextWellCard-row--right-content">
£12
</div>
</div>
<div class="TextWellCard-footer">
Then £20 per year
</div>
</div>
<div class="TextWellCard">
<div class="TextWellCard-title">
Pay Monthly
</div>
<div class="TextWellCard-row">
<div class="TextWellCard-row--left-content">
Setup fee:
</div>
<div class="TextWellCard-row--right-content">
£15
</div>
</div>
<div class="TextWellCard-footer">
Then £2 per month
</div>
</div>
</div>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 ready for download by tenants or agents
<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>