CSS-Only Components

This section provides details on the few CSS-only components included in CoralUI considered as public API. Use the 'Show Markup' feature to see how each CSS-only component should be implemented. To explore the rest of the CoralUI components, see the Components documentation.

Coral.DecoratedTextfield renders a textfield with an embedded button, icon, or both, but styles only. This is used by other components like Coral.Search, which add more functionality.

Icon Only

Show Markup
<span class="coral-DecoratedTextfield">
  <coral-icon class="coral-DecoratedTextfield-icon" icon="search" size="XS"></coral-icon>
  <input is="coral-textfield" class="coral-DecoratedTextfield-input">
</span>

Button Only

Show Markup
<span class="coral-DecoratedTextfield">
  <input is="coral-textfield" class="coral-DecoratedTextfield-input">
  <button is="coral-button" variant="minimal" icon="close" iconsize="XS" class="coral-DecoratedTextfield-button"></button>
</span>

Icon and Button

Show Markup
<span class="coral-DecoratedTextfield">
  <coral-icon class="coral-DecoratedTextfield-icon" icon="search" size="XS"></coral-icon>
  <input is="coral-textfield" class="coral-DecoratedTextfield-input">
  <button is="coral-button" variant="minimal" icon="close" iconsize="XS" class="coral-DecoratedTextfield-button"></button>
</span>

Table Examples

|

Basic

Pet Name Type Good/Bad
Squeak Mouse Bad
Spot Dog Bad
Fluffy Velociraptor Good
Show Markup
<table class="coral-Table">
  <thead class="coral-Table-head">
    <tr class="coral-Table-row">
      <th class="coral-Table-headerCell">Pet Name</th>
      <th class="coral-Table-headerCell">Type</th>
      <th class="coral-Table-headerCell">Good/Bad</th>
    </tr>
  </thead>
  <tbody class="coral-Table-body">
  <tr class="coral-Table-row">
    <td class="coral-Table-cell">Squeak</td>
    <td class="coral-Table-cell">Mouse</td>
    <td class="coral-Table-cell">Bad</td>
  </tr>
  <tr class="coral-Table-row">
    <td class="coral-Table-cell">Spot</td>
    <td class="coral-Table-cell">Dog</td>
    <td class="coral-Table-cell">Bad</td>
  </tr>
  <tr class="coral-Table-row">
    <td class="coral-Table-cell">Fluffy</td>
    <td class="coral-Table-cell">Velociraptor</td>
    <td class="coral-Table-cell">Good</td>
  </tr>
</tbody>
</table>

Row Hover

Add the coral-Table--hover class name to enable row hover states.
Pet Name Type Good/Bad
Mongo Chihuahua Bad
Tiny Great Dane Bad
Jaws Pit Bull Good
Show Markup
<table class="coral-Table coral-Table--hover">
  <thead class="coral-Table-head">
    <tr class="coral-Table-row">
      <th class="coral-Table-headerCell">Pet Name</th>
      <th class="coral-Table-headerCell">Type</th>
      <th class="coral-Table-headerCell">Good/Bad</th>
    </tr>
  </thead>
  <tbody class="coral-Table-body">
  <tr class="coral-Table-row">
    <td class="coral-Table-cell">Mongo</td>
    <td class="coral-Table-cell">Chihuahua</td>
    <td class="coral-Table-cell">Bad</td>
  </tr>
  <tr class="coral-Table-row">
    <td class="coral-Table-cell">Tiny</td>
    <td class="coral-Table-cell">Great Dane</td>
    <td class="coral-Table-cell">Bad</td>
  </tr>
  <tr class="coral-Table-row">
    <td class="coral-Table-cell">Jaws</td>
    <td class="coral-Table-cell">Pit Bull</td>
    <td class="coral-Table-cell">Good</td>
  </tr>
</tbody>
</table>

Bordered

Add the coral-Table--bordered class name to add a border.
Pet Name Type Good/Bad
Hopper Frog Good
Pokey Porcupine Good
Mr. Snuggles Snake Bad
Show Markup
<table class="coral-Table coral-Table--bordered">
  <thead class="coral-Table-head">
    <tr class="coral-Table-row">
      <th class="coral-Table-headerCell">Pet Name</th>
      <th class="coral-Table-headerCell">Type</th>
      <th class="coral-Table-headerCell">Good/Bad</th>
    </tr>
  </thead>
  <tbody class="coral-Table-body">
  <tr class="coral-Table-row">
    <td class="coral-Table-cell">Hopper</td>
    <td class="coral-Table-cell">Frog</td>
    <td class="coral-Table-cell">Good</td>
  </tr>
  <tr class="coral-Table-row">
    <td class="coral-Table-cell">Pokey</td>
    <td class="coral-Table-cell">Porcupine</td>
    <td class="coral-Table-cell">Good</td>
  </tr>
  <tr class="coral-Table-row">
    <td class="coral-Table-cell">Mr. Snuggles</td>
    <td class="coral-Table-cell">Snake</td>
    <td class="coral-Table-cell">Bad</td>
  </tr>
</tbody>
</table>

Wells are used to separate field groups or large blocks of text. They are specified using coral-Well.

Well Examples

|

Section 1

Lorem ipsum Fugiat sit mollit incididunt in occaecat reprehenderit cillum magna Excepteur enim eu deserunt eiusmod dolor occaecat dolore officia mollit dolore consectetur elit in enim esse consectetur amet do exercitation..

Section 2

Lorem ipsum Fugiat sit mollit incididunt in occaecat reprehenderit cillum magna Excepteur enim eu deserunt eiusmod dolor occaecat dolore officia mollit dolore consectetur elit in enim esse consectetur amet do exercitation..
Show Markup
<section class="u-columnMedium">
  <h4 class="coral-Heading coral-Heading--4">Section 1</h4>
  <div class="coral-Well">
    Lorem ipsum Fugiat sit mollit incididunt in occaecat reprehenderit cillum
    magna Excepteur enim eu deserunt eiusmod dolor occaecat dolore officia mollit
    dolore consectetur elit in enim esse consectetur amet do exercitation..
  </div>
</section>
<br/>
<section class="u-columnMedium">
  <h4 class="coral-Heading coral-Heading--4">Section 2</h4>
  <div class="coral-Well">
    Lorem ipsum Fugiat sit mollit incididunt in occaecat reprehenderit cillum
    magna Excepteur enim eu deserunt eiusmod dolor occaecat dolore officia mollit
    dolore consectetur elit in enim esse consectetur amet do exercitation..
  </div>
</section>

RadioGroup Examples

|

Horizontal

By default, a coral-RadioGroup will align the coral-Radio horizontally.
Show Markup
<div class="coral-RadioGroup">
  <label class="coral-Radio">
    <coral-radio name="r1">Quack Quack</coral-radio>
  </label>
  <label class="coral-Radio">
    <coral-radio name="r1">Woof Woof</coral-radio>
  </label>
  <label class="coral-Radio">
    <coral-radio name="r1">Meow Meow</coral-radio>
  </label>
</div>

Vertical

Add the coral-RadioGroup--vertical class name for a vertical layout.
Show Markup
<div class="coral-RadioGroup coral-RadioGroup--vertical">
  <label class="coral-Radio">
    <coral-radio name="r1">Quack Quack</coral-radio>
  </label>
  <label class="coral-Radio">
    <coral-radio name="r1">Woof Woof</coral-radio>
  </label>
  <label class="coral-Radio">
    <coral-radio name="r1">Meow Meow</coral-radio>
  </label>
</div>

Labels Below

Add the coral-RadioGroup--labelsBelow class name to have the labels placed below each item.
Show Markup
<div class="coral-RadioGroup coral-RadioGroup--labelsBelow">
  <label class="coral-Radio">
    <coral-radio name="r1">1</coral-radio>
  </label>
  <label class="coral-Radio">
    <coral-radio name="r1">2</coral-radio>
  </label>
  <label class="coral-Radio">
    <coral-radio name="r1">3</coral-radio>
  </label>
</div>

A CoralUI coral-InputGroup is a composite CSS pattern for Buttons and Textfields that share a border. It is the base style of several more complex components due to its versatility.

InputGroup Examples

|

Button Before

Show Markup
<div class="coral-InputGroup">
  <span class="coral-InputGroup-button">
    <button is="coral-button" icon="select" title="Select"></button>
  </span>
  <input is="coral-textfield" class="coral-InputGroup-input">
</div>

Button After

Show Markup
<div class="coral-InputGroup">
  <input is="coral-textfield" class="coral-InputGroup-input">
  <span class="coral-InputGroup-button">
    <button is="coral-button" icon="select" title="Select"></button>
  </span>
</div>

Icon Buttons on Both Sides

Show Markup
<div class="coral-InputGroup">
  <span class="coral-InputGroup-button">
    <button is="coral-button" icon="minus" title="Minus"></button>
  </span>
  <input is="coral-textfield" class="coral-InputGroup-input">
  <span class="coral-InputGroup-button">
    <button is="coral-button" icon="add" title="Add"></button>
  </span>
</div>

Text Buttons on Both Sides

Show Markup
<div class="coral-InputGroup">
  <span class="coral-InputGroup-button">
    <button is="coral-button">Go!</button>
  </span>
  <input is="coral-textfield" class="coral-InputGroup-input">
  <span class="coral-InputGroup-button">
    <button is="coral-button">Go!</button>
  </span>
</div>

Block with Button Before

Show Markup
<div class="coral-InputGroup coral-InputGroup--block">
  <span class="coral-InputGroup-button">
    <button is="coral-button" icon="select" title="Select"></button>
  </span>
  <input is="coral-textfield" class="coral-InputGroup-input">
</div>

Block with Button After

Show Markup
<div class="coral-InputGroup coral-InputGroup--block">
  <input is="coral-textfield" class="coral-InputGroup-input">
  <span class="coral-InputGroup-button">
    <button is="coral-button" icon="select" title="Select"></button>
  </span>
</div>

Block with Text Buttons on Both Sides

Show Markup
<div class="coral-InputGroup coral-InputGroup--block">
  <span class="coral-InputGroup-button">
    <button is="coral-button">Go!</button>
  </span>
  <input is="coral-textfield" class="coral-InputGroup-input">
  <span class="coral-InputGroup-button">
    <button is="coral-button">Go!</button>
  </span>
</div>

Block with Icon Buttons on Both Sides

Show Markup
<div class="coral-InputGroup coral-InputGroup--block">
  <span class="coral-InputGroup-button">
    <button is="coral-button" icon="minus" title="Minus"></button>
  </span>
  <input is="coral-textfield" class="coral-InputGroup-input">
  <span class="coral-InputGroup-button">
    <button is="coral-button" icon="add" title="Add"></button>
  </span>
</div>

Vertical Layout

Show Markup
<form class="coral-Form coral-Form--vertical">
  <section class="coral-Form-fieldset">
  <div class="coral-Form-fieldwrapper">
    <label class="coral-Form-fieldlabel" id="label-vertical-inputgroup-0">Label</label>
    <div class="coral-InputGroup coral-Form-field">
      <input is="coral-textfield" class="coral-InputGroup-input" placeholder="Search">
      <span class="coral-InputGroup-button">
        <button is="coral-button" icon="select" title="Select"></button>
      </span>
    </div>
  </div>
  <div class="coral-Form-fieldwrapper">
    <label class="coral-Form-fieldlabel" id="label-vertical-inputgroup-1">Required</label>
    <div class="coral-InputGroup coral-Form-field">
      <input is="coral-textfield" class="coral-InputGroup-input" placeholder="Search">
      <span class="coral-InputGroup-button">
        <button is="coral-button" icon="select" title="Select"></button>
      </span>
    </div>
    <coral-icon class="coral-Form-fieldinfo" icon="infoCircle" size="S" id="coral-form-vertical-inputgroup-fieldinfo"></coral-icon>
    <coral-tooltip variant="info" placement="right" target="#coral-form-vertical-inputgroup-fieldinfo">Required Information</coral-tooltip>
  </div>
  <div class="coral-Form-fieldwrapper">
    <label class="coral-Form-fieldlabel" id="label-vertical-inputgroup-2">Invalid</label>
    <div class="coral-InputGroup coral-Form-field">
      <input is="coral-textfield" class="coral-InputGroup-input" placeholder="Search">
      <span class="coral-InputGroup-button">
        <button is="coral-button" icon="select" title="Select"></button>
      </span>
    </div>
    <coral-icon class="coral-Form-fielderror" icon="infoCircle" size="S" id="coral-form-vertical-inputgroup-fielderror"></coral-icon>
    <coral-tooltip variant="error" placement="right" target="#coral-form-vertical-inputgroup-fielderror">Error Message</coral-tooltip>
  </div>
  </section>
</form>

Aligned Layout

Show Markup
<form class="coral-Form coral-Form--aligned u-columnLarge">
  <section class="coral-Form-fieldset">
  <div class="coral-Form-fieldwrapper">
    <label class="coral-Form-fieldlabel" id="label-aligned-inputgroup-0">Label</label>
    <div class="coral-InputGroup coral-Form-field">
      <input is="coral-textfield" class="coral-InputGroup-input" placeholder="Search">
      <span class="coral-InputGroup-button">
        <button is="coral-button" icon="select" title="Select"></button>
      </span>
    </div>
  </div>
  <div class="coral-Form-fieldwrapper">
    <label class="coral-Form-fieldlabel" id="label-aligned-inputgroup-1">Required</label>
    <div class="coral-InputGroup coral-Form-field">
      <input is="coral-textfield" class="coral-InputGroup-input" placeholder="Search">
      <span class="coral-InputGroup-button">
        <button is="coral-button" icon="select" title="Select"></button>
      </span>
    </div>
    <coral-icon class="coral-Form-fieldinfo" icon="infoCircle" size="S" id="coral-form-aligned-inputgroup-fieldinfo"></coral-icon>
    <coral-tooltip variant="info" placement="right" target="#coral-form-aligned-inputgroup-fieldinfo">Required Information</coral-tooltip>
  </div>
  <div class="coral-Form-fieldwrapper">
    <label class="coral-Form-fieldlabel" id="label-aligned-inputgroup-2">Invalid</label>
    <div class="coral-InputGroup coral-Form-field">
      <input is="coral-textfield" class="coral-InputGroup-input" placeholder="Search">
      <span class="coral-InputGroup-button">
        <button is="coral-button" icon="select" title="Select"></button>
      </span>
    </div>
    <coral-icon class="coral-Form-fielderror" icon="infoCircle" size="S" id="coral-form-aligned-inputgroup-fielderror"></coral-icon>
    <coral-tooltip variant="error" placement="right" target="#coral-form-aligned-inputgroup-fielderror">Error Message</coral-tooltip>
  </div>
  </section>
</form>

Headings are used to represent titles in content. The default CoralUI font styles cascade from coral--light theme, so that class must be specified at a higher level! See the Themes section of the Fundamentals documenation for more detail.

Heading Examples

|

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Show Markup
<section class="coral-light">
  <h1 class="coral-Heading coral-Heading--1">Heading 1</h1>
  <h2 class="coral-Heading coral-Heading--2">Heading 2</h2>
  <h3 class="coral-Heading coral-Heading--3">Heading 3</h3>
  <h4 class="coral-Heading coral-Heading--4">Heading 4</h4>
  <h5 class="coral-Heading coral-Heading--5">Heading 5</h5>
  <h6 class="coral-Heading coral-Heading--6">Heading 6</h6>
</section>

CoralUI provides some CSS utility classes that can be applied to any DOM element. These classes follow the SUIT convention of a u-coral- prefix.

Clear Fix

Applies the clearfix hack.

class="u-coral-clearFix"

No Border

Removes all the borders of an element.

class="u-coral-noBorder"

No Scroll

Stops an element from scrolling.

class="u-coral-noScroll"

Screen-reader Only

Hides elements from visual browsers.

class="u-coral-screenReaderOnly"

Cursor

A closed hand cursor that indicates an item is current grabbed.

class="u-coral-closedHand"

An open hand cursor to indicate that an item can be grabbed.

class="u-coral-openHand"

Please see coralui-core's utilities directory for a list of all available utility classes.

Coral.Form styles examples shows a basic scenario, how the form styles can be used. Please look at the related components, to see more examples.

Form Examples

|

Vertical Layout

Add the coral-Form--vertical class to render all labels and fields on the same vertical line.

Read only text
Read only text
Show Markup
<form class="coral-Form coral-Form--vertical">
  <section class="coral-Form-fieldset">
  <label class="coral-Form-fieldlabel">Text</label>
  <span class="coral-Form-field">Read only text</span>
  <div class="coral-Form-fieldwrapper">
    <label class="coral-Form-fieldlabel">Text (with coral-Form-fieldinfo)</label>
    <span class="coral-Form-field">Read only text</span>
    <coral-icon id="coral-Form-Aligned-Text-required" class="coral-Form-fieldinfo" icon="infoCircle"></coral-icon>
    <coral-tooltip variant="info" placement="right" target="#coral-Form-Vertical-Text-required">Tooltip Information</coral-tooltip>
  </div>
  <label class="coral-Form-fieldlabel">Aligning buttons left</label>
  <div class="coral-Form-fieldwrapper coral-Form-fieldwrapper--alignLeft">
    <button is="coral-button" class="coral-Form-field" type="button">Cancel</button>
    <button is="coral-button" variant="primary" class="coral-Form-field">Submit</button>
  </div>
</section>
</form>

Aligned Layout

Add the coral-Form--aligned class to render each label and field pair on the same horizontal line.

Read only text
Read only text
Show Markup
<form class="coral-Form coral-Form--aligned">
  <section class="coral-Form-fieldset">
  <label class="coral-Form-fieldlabel">Text</label>
  <span class="coral-Form-field">Read only text</span>
  <div class="coral-Form-fieldwrapper">
    <label class="coral-Form-fieldlabel">Text</label>
    <span class="coral-Form-field">Read only text</span>
    <coral-icon id="coral-Form-Aligned-Text-required" class="coral-Form-fieldinfo" icon="infoCircle"></coral-icon>
    <coral-tooltip variant="info" placement="right" target="#coral-Form-Aligned-Text-required">Tooltip Information</coral-tooltip>
  </div>
</section>
</form>

Links get styled using the coral-Link class. The correct font styles get cascaded from coral--light so be sure you add it on a higher level!

Link Examples

|

Regular

This is a coral-Link.

Show Markup
<p>
  This is a <a href="#" class="coral-Link">coral-Link</a>.
</p>

Subtle

This uses coral-Link--subtle.

Show Markup
<p>
  This uses <a href="#" class="coral-Link coral-Link--subtle">coral-Link--subtle</a>.
</p>