24 #CMS CMS Styles
These are styles available for the CMS app itself. These styles are not added to public-facing pages.
All CMS styles use classnames that are prefixed with cms-.
To preview these styles, use the button at the top right of the page to cycle through brand styles until "CMS" is active (ICE -> NYSE -> Bakkt -> CMS).
24.2 #CMS.Dialog Dialog
cms-dialog, cms-dialog__header, cms-dialog__body, cms-dialog__footer, cms-dialog__close
Example
<button id="open-dialog" class="cms-button">Show dialog</button>
<dialog class="cms-dialog" id="dialog-demo">
<button class="cms-dialog__close" id="close-dialog" aria-label="close">×</button>
<header class="cms-dialog__header">The dialog title</header>
<div class="cms-dialog__body">Here are the body contents of the dialog</div>
<footer class="cms-dialog__footer">The footer</footer>
</dialog>24.3 #CMS.Dropdown Dropdown
cms-dropdown, cms-dropdown__toggle, cms-dropdown__drawer
Examples
Default styling
cms-dropdown--right
align the dropdown to the right
<div class="cms-dropdown [modifier class]">
<button class="cms-dropdown__toggle">Menu</button>
<ul class="cms-dropdown__drawer cms-vertical-menu">
dropdown contents
</ul>
</div>24.4 #CMS.Forms Forms
cms-form, cms-form--horizontal, cms-form__group, cms-form__feedback
Forms are stacked vertically by default, but can be switched to a horizontal (side-by-side) layout with the cms-form--horizontal modifier.
Labels, inputs, and buttons can all be direct children of the <form>. A label and its input may optionally be wrapped in a .cms-form__group. Multiple fields may optionally be wrapped in a <fieldset>.
Examples
Default styling
cms-form--horizontal
align form horizontally
<form class="cms-form [modifier class]">
<label for="onea">One</label>
<input type="text" id="onea"/>
<div class="cms-form__group">
<label for="twoa">Second form field with a much longer label</label>
<input type="text" id="twoa"/>
</div>
<label for="threea">Three</label>
<textarea id="threea"></textarea>
<label class="cms-checkbox" for="four-check">
<input type="checkbox" id="four-check" />
A checkbox
</label>
<fieldset class="cms-radio">
<legend>Choose an option</legend>
<label>
<input type="radio" name="a" value="1"/>
A radio option
</label>
<label for="radio-2">
<input type="radio" name="a" value="2" id="radio-2"/>
Option two
</label>
<label>
<input type="radio" name="a" value="3"/>
Another option
</label>
</fieldset>
<button type="submit" class="cms-button">Submit</button>
</form>
Example
Show Markup
<form class="cms-form">
<fieldset>
<label for="oneb">One</label>
<input type="text" id="oneb"/>
<div class="cms-form__group">
<label for="twob">Second form field with a much longer label</label>
<input type="text" id="twob"/>
</div>
</fieldset>
<label for="threeb">Three</label>
<textarea id="threeb"></textarea>
<label for="fourb">Four</label>
<select id="fourb">
<option>Trader</option>
<option>Broker</option>
<option>Italian Plumber</option>
</select>
<button type="submit" class="cms-button">Submit</button>
</form>
Example
Show Markup
<form class="cms-form cms-form--horizontal">
<label for="one-c">One</label>
<input type="text" id="one-c"/>
<p>Help text in the middle of the form</p>
<label for="two-c">Two</label>
<input type="text" id="two-c"/>
</form>24.4.1 #CMS.Forms.Feedback-States Feedback states
Optionally add a cms-form__feedback after the associated input.
Examples
Default styling
has-error
invalid or has error
has-success
successful or valid input
<form class="cms-form cms-form--horizontal">
<div class="cms-form__feedback [modifier class]">This is a form-level feedback message</div>
<label class="[modifier class]" for="first-c">First Name</label>
<input class="[modifier class]" type="text" id="first-c"/>
<div class="cms-form__group [modifier class]">
<label for="last-c">Last Name</label>
<input type="text" id="last-c"/>
</div>
<div class="cms-form__group [modifier class]">
<label for="job-c">Job Title</label>
<input type="text" id="job-c"/>
<div class="cms-form__feedback">G’day, mate</div>
</div>
<button type="submit" class="cms-button">Submit</button>
</form>24.4.2 #CMS.Forms.Input-Groups Input group
Align multiple form fields and/or buttons inline
Examples
Default styling
cms-form--horizontal
works with any form layout
<form class="cms-form [modifier class]">
<label for="input-group-a">Publish a Page</label>
<div class="cms-input-group">
<input type="text" id="input-group-a"/>
<button class="cms-button">Publish</button>
</div>
</form>
Example
Show Markup
<form class="cms-form cms-form--horizontal">
<div class="cms-input-group">
<div class="cms-input-group__addon">$</div>
<input type="text"/>
<button class="cms-button">OK</button>
</div>
<div class="cms-input-group">
<input type="text"/>
<div class="cms-input-group__addon">%</div>
<button class="cms-button">OK</button>
</div>
</form>24.5 #CMS.Inspector-Bar Inspector bar
24.7 #CMS.Page-Title Page title
Example
All pages
<h1 class="cms-page-title">All pages</h1>24.8 #CMS.Panels Panels
cms-panel, cms-panel__heading, cms-panel__body
A small panel of content. Muliple panels can be stacked one after the other
Example
Panel heading
Panel content here.
<div class="cms-panel">
<div class="cms-panel__heading">Panel heading</div>
<div class="cms-panel__body">
Panel content here.
</div>
</div>24.8.1 #CMS.Panels.Collapsible Collapsible
A panel where the body can be collapsed by clicking the header. Add/remove is-collapsed to open and close the panel.
Example
Body is visible
Body is not visible
<div class="cms-panel cms-panel--collapsible">
<button class="cms-panel__heading">Non-collapsed panel</button>
<div class="cms-panel__body">
Body is visible
</div>
</div>
<div class="cms-panel cms-panel--collapsible is-collapsed">
<button class="cms-panel__heading">Collapsed panel</button>
<div class="cms-panel__body">
Body is not visible
</div>
</div>
Example
Body contents here
Show Markup
<div class="cms-panel panel-collapsible">
<button class="cms-panel__heading">
Panel heading
<span class="cms-panel__aside">(1 item selected)</span>
</button>
<div class="cms-panel__body">
Body contents here
</div>
</div>24.10 #CMS.Tables Tables
Example
| Name | URL | Last Modified |
|---|---|---|
| Connectivity Map | /connectivity-map | Aug 26, 2016 01:32 PM |
| Oil Network | /oil-network/main | Aug 11, 2017 01:32 PM |
| Contact | /contact | Jun 3, 2017 01:31 PM |
<table>
<thead>
<tr>
<th>Name</th>
<th>URL</th>
<th>Last Modified</th>
</tr>
</thead>
<tbody>
<tr>
<td>Connectivity Map</td>
<td>/connectivity-map</td>
<td>Aug 26, 2016 01:32 PM</td>
</tr>
<tr>
<td>Oil Network</td>
<td>/oil-network/main</td>
<td>Aug 11, 2017 01:32 PM</td>
</tr>
<tr>
<td>Contact</td>
<td>/contact</td>
<td>Jun 3, 2017 01:31 PM</td>
</tr>
</tbody>
</table>24.11 #CMS.Tile Tile
Example
Tile contents
<div class="cms-tile">
Tile contents
</div>