Most CoralUI styles are baked into each web component, so not much is available as public API. More detail about CoralUI's CSS architecture can be found in the architecture section of Docs & Guides.

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

Current Version: 1.1.3

Github: @coralui/coralui-component-decoratedtextfield

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.

DecoratedTextfield Examples

|

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>

Current Version: 4.6.3

Github: @coralui/coralui-core

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>

Current Version: 4.6.3

Github: @coralui/coralui-core

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>

Current Version: 4.6.3

Github: @coralui/coralui-core

RadioGroup Examples

|

Horizontal

By default, a coral-RadioGroup will align the coral-Radio horizontally.

Quack Quack

Woof Woof

Meow Meow

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.

Quack Quack

Woof Woof

Meow Meow

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.

1

2

3

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>

Current Version: 1.1.3

Github: @coralui/coralui-component-inputgroup

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>

Forms

Vertical Layout

Label

Required

Invalid

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

Label

Required

Invalid

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>

Current Version: 4.6.3

Github: @coralui/coralui-core

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>

Current Version: 4.6.3

Github: @coralui/coralui-core

Utility Classes

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.

Current Version: 1.1.3

Github: @coralui/coralui-component-form

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.

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.

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>

Current Version: 4.6.3

Github: @coralui/coralui-core

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>