CoralUI Styles Introduction
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.
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 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.
<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>
<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>
<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>
Pet Name | Type | Good/Bad |
---|---|---|
Squeak | Mouse | Bad |
Spot | Dog | Bad |
Fluffy | Velociraptor | Good |
<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>
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 |
<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>
coral-Table--bordered
class name to add a border.
Pet Name | Type | Good/Bad |
---|---|---|
Hopper | Frog | Good |
Pokey | Porcupine | Good |
Mr. Snuggles | Snake | Bad |
<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
.
<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>
coral-RadioGroup
will align the coral-Radio
horizontally.
<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>
coral-RadioGroup--vertical
class name for a vertical layout.
<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>
coral-RadioGroup--labelsBelow
class name to have the labels placed below each item.
<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.
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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.
<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.
Applies the clearfix hack.
class="u-coral-clearFix"
Removes all the borders of an element.
class="u-coral-noBorder"
Stops an element from scrolling.
class="u-coral-noScroll"
Hides elements from visual browsers.
class="u-coral-screenReaderOnly"
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.
Add the coral-Form--vertical
class to render all labels and fields on the same vertical line.
<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>
Add the coral-Form--aligned
class to render each label and field pair on the same horizontal line.
<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!
This is a coral-Link.
<p> This is a <a href="#" class="coral-Link">coral-Link</a>. </p>
This uses coral-Link--subtle.
<p> This uses <a href="#" class="coral-Link coral-Link--subtle">coral-Link--subtle</a>. </p>