Breeze Typography
Headings
All HTML headings, <h1> through <h6>, are available. Additionally, .h1 through .h6 classes are also available. You can also emphasize the text using <strong> tags.
.h1 Breeze Heading
.h2 Breeze Heading
.h3 Breeze Heading
.h4 Breeze Heading
.h5 Breeze Heading
.h6 Breeze Heading
Lists
Unordered list <ul>
- First item
- Second
- Subitem of the second item
- Third item
Ordered list <ol>
- First item
- Second
- Subitem
- Third item
Unstyled list .unstyled
- First item
- Second item
- Subitem
- Third item
Tables
Regular table <table>
| # | Firstname | Lastname | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Mobile-friendly table .table
| # | Firstname | Lastname | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Dark Section
Use .color-invert class name on the section with dark background and Breeze will change text, buttons, forms, and links to match this new dark background. This feature is handy when using the dark image in the slider and regular links or buttons looks odd.
<form class="form flex gap" data-mage-init='{"validation": {"errorClass": "mage-error"}}'>
<div class="field">
<div class="control">
<input name="email" type="email" placeholder="Enter your email address" data-mage-init='{"mage/trim-input":{}}' data-validate='{required:true, "validate-email":true}' required="required">
</div>
</div>
<div class="actions">
<button class="action primary" title="Submit" type="submit" aria-label="Submit">
<span>Submit</span>
</button>
</div>
</form>
Components
Buttons
Forms
Inline form
<form class="form flex gap" data-mage-init='{"validation": {"errorClass": "mage-error"}}'>
<div class="field">
<div class="control">
<input name="email" type="email" placeholder="Enter your email address" data-mage-init='{"mage/trim-input":{}}' data-validate='{required:true, "validate-email":true}' required="required">
</div>
</div>
<div class="actions">
<button class="action primary" title="Submit" type="submit" aria-label="Submit">
<span>Submit</span>
</button>
</div>
</form>
Standard form
<form class="form ">
<fieldset class="fieldset create info">
<div class="field field-name-firstname required">
<label class="label" for="firstname"><span>First Name</span></label>
<div class="control">
<input type="text" id="firstname" name="firstname" value="" title="First Name" class="input-text required-entry" data-validate="{required:true}" required="required">
</div>
</div>
<div class="field field-name-lastname required">
<label class="label" for="range"><span>Range</span></label>
<div class="control">
<input type="range" id="range" name="range" value="" class="input-text required-entry" data-validate="{required:true}" required="required">
</div>
</div>
<div class="field required">
<label class="label" for="select"><span>Select</span></label>
<div class="control">
<select id="select" name="select" value="" title="Select" class="select required-entry" data-validate="{required:true}" required="required">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</div>
</div>
<div class="field required">
<label class="label" for="multiselect"><span>Multiselect</span></label>
<div class="control">
<select multiple id="multiselect" name="multiselect[]" value="" title="Multiselect" class="multiselect required-entry" data-validate="{required:true}" required="required">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</div>
</div>
<div class="field choice">
<input type="checkbox" name="assistance_allowed_checkbox" title="Allow remote shopping assistance" value="1" id="assistance_allowed_checkbox" class="checkbox">
<label for="assistance_allowed_checkbox" class="label">
<span>Allow remote shopping assistance</span>
</label>
<input type="hidden" name="assistance_allowed" value="">
<div class="field-tooltip toggle" data-trigger="true" data-dropdown-parent="true">
<span id="tooltip-label" class="label"><span>Tooltip</span></span>
<span id="tooltip" class="field-tooltip-action action-help" tabindex="0" data-toggle="dropdown" data-bind="mageInit: {'dropdown':{'activeClass': '_active', 'parent': '.field-tooltip.toggle'}}" aria-labelledby="tooltip-label" aria-haspopup="true" aria-expanded="false" role="button" data-mage-init='{"dropdown":{"activeClass":"_active","parent":".field-tooltip.toggle"}}' data-dropdown="true">
</span>
<div class="field-tooltip-content" data-target="dropdown" aria-hidden="true">
This allows merchants to "see what you see" and take actions on your behalf in order to provide better assistance. </div>
</div>
</div>
</fieldset>
<fieldset class="fieldset create account" data-hasrequired="* Required Fields">
<legend class="legend"><span>Sign-in Information</span></legend><br>
<div class="field required">
<label for="email_address" class="label"><span>Email</span></label>
<div class="control">
<input type="email" name="email" autocomplete="email" id="email_address" value="" title="Email" class="input-text" data-mage-init='{"mage/trim-input":{}}' data-validate='{"required":true, "validate-email":true}' required="required">
</div>
</div>
</fieldset>
</form>
Tabs
First tab content
Second tab content
Third tab content
Messages
<div class="message success"><div>Success message with <a href="#">link</a></div></div>
<div class="message error"><div>Error message with <a href="#">link</a></div></div>
<div class="message info"><div>Info message with <a href="#">link</a></div></div>