.cw-link<a class="cw-link" href="#">...</a>
.cw-link-external<a class="cw-link cw-link-external" href="#">...</a>
.cw-text<span class="cw-text">...</span>
Note: the button classes work reliably only with a,
button, input[type=submit],
input[type=button], and input[type=reset]
.cw-button<a class="cw-button" href="#">...</a>
<button class="cw-button">...</button>
<input class="cw-button" type="submit" value="..." />
<input class="cw-button" type="button" value="..." />
<input class="cw-button" type="reset" value="..." />
.cw-button-constrained<a class="cw-button cw-button-constrained" href="#">...</a>
<button class="cw-button cw-button-constrained">...</button>
<input class="cw-button cw-button-constrained" type="submit" value="..." />
<input class="cw-button cw-button-constrained" type="button" value="..." />
<input class="cw-button cw-button-constrained" type="reset" value="..." />
<ul class="cw-button-group cw-button-constrained">
<li><a href="#">...</a></li>
<li><button>...</button></li>
<li><input type="submit" value="..." /></li>
<li><input type="button" value="..." /></li>
<li><input type="reset" value="..." /></li>
</ul>
.cw-button-groupNote: Currently implemented using ul only
<ul class="cw-button-group">
<li><a href="#">...</a></li>
<li><button>...</button></li>
<li><input type="submit" value="..." /></li>
<li><input type="button" value="..." /></li>
<li><input type="reset" value="..." /></li>
</ul>
.cw-button-active<a class="cw-button cw-button-active" href="#">...</a>
<button class="cw-button cw-button-active">...</button>
<input class="cw-button cw-button-active" type="submit" value="..." />
<input class="cw-button cw-button-active" type="button" value="..." />
<input class="cw-button cw-button-active" type="reset" value="..." />
<ul class="cw-button-group">
<li><a class="cw-button-active" href="#">...</a></li>
<li><button>...</button></li>
<li><input type="submit" value="..." /></li>
<li><input type="button" value="..." /></li>
<li><input type="reset" value="..." /></li>
</ul>
.cw-button-elegant<a class="cw-button cw-button-elegant" href="#">Button</a>
<button class="cw-button cw-button-elegant">Button</button>
<input class="cw-button cw-button-elegant" type="submit" value="Button" />
<input class="cw-button cw-button-elegant" type="button" value="Button" />
<input class="cw-button cw-button-elegant" type="reset" value="Button" />
<a class="cw-button cw-button-constrained cw-button-elegant" href="#">...</a>
<button class="cw-button cw-button-constrained cw-button-elegant">...</button>
<input class="cw-button cw-button-constrained cw-button-elegant" type="submit" value="..." />
<input class="cw-button cw-button-constrained cw-button-elegant" type="button" value="..." />
<input class="cw-button cw-button-constrained cw-button-elegant" type="reset" value="..." />
<ul class="cw-button-group cw-button-constrained cw-button-elegant">
<li><a href="#">...</a></li>
<li><button>...</button></li>
<li><input type="submit" value="..." /></li>
<li><input type="button" value="..." /></li>
<li><input type="reset" value="..." /></li>
</ul>
<ul class="cw-button-group cw-button-elegant">
<li><a href="#">...</a></li>
<li><button>...</button></li>
<li><input type="submit" value="..." /></li>
<li><input type="button" value="..." /></li>
<li><input type="reset" value="..." /></li>
</ul>
<a class="cw-button cw-button-active cw-button-elegant" href="#">...</a>
<button class="cw-button cw-button-active cw-button-elegant">...</button>
<input class="cw-button cw-button-active cw-button-elegant" type="submit" value="..." />
<input class="cw-button cw-button-active cw-button-elegant" type="button" value="..." />
<input class="cw-button cw-button-active cw-button-elegant" type="reset" value="..." />
<ul class="cw-button-group cw-button-elegant">
<li><a class="cw-button-active" href="#">...</a></li>
<li><button>...</button></li>
<li><input type="submit" value="..." /></li>
<li><input type="button" value="..." /></li>
<li><input type="reset" value="..." /></li>
</ul>
.cw-image<img class="cw-image" src="../images/feature.jpg" alt="..." />
.cw-image-thumbnail<img class="cw-image cw-image-thumbnail" src="../images/feature.jpg" alt="..." />
.cw-image-preview<img class="cw-image cw-image-preview" src="../images/feature.jpg" alt="..." />
.cw-image-large<img class="cw-image cw-image-large" src="../images/feature.jpg" alt="..." />
.cw-image-full<img class="cw-image cw-image-full" src="../images/feature.jpg" alt="..." />
Note: any or all of the header, body, or footer segments within a section can be omitted
.cw-section<div class="cw-section">
<div class="cw-section-header">
...header...
</div>
<div class="cw-section-body">
...body...
</div>
<div class="cw-section-footer">
...footer...
</div>
</div>
.cw-section-header<div class="cw-section">
<div class="cw-section-header">
...header...
</div>
<div class="cw-section-body">
...body...
</div>
<div class="cw-section-footer">
...footer...
</div>
</div>
.cw-section-body<div class="cw-section">
<div class="cw-section-header">
...header...
</div>
<div class="cw-section-body">
...body...
</div>
<div class="cw-section-footer">
...footer...
</div>
</div>
.cw-section-footer<div class="cw-section">
<div class="cw-section-header">
...header...
</div>
<div class="cw-section-body">
...body...
</div>
<div class="cw-section-footer">
...footer...
</div>
</div>
.cw-section-shadowed<div class="cw-section cw-section-shadowed">
<div class="cw-section-header">
...header...
</div>
<div class="cw-section-body">
...body...
</div>
<div class="cw-section-footer">
...footer...
</div>
</div>
.cw-section-popupNote: The exact position of pop-ups must be declared separately
<div class="cw-section cw-section-popup">
<div class="cw-section-header">
...header...
</div>
<div class="cw-section-body">
...body...
</div>
<div class="cw-section-footer">
...footer...
</div>
</div>
<div class="cw-section cw-section-shadowed cw-section-popup">
<div class="cw-section-header">
...header...
</div>
<div class="cw-section-body">
...body...
</div>
<div class="cw-section-footer">
...footer...
</div>
</div>
.cw-section-drawer<div class="cw-section cw-section-drawer">
<div class="cw-section-header">
...header...
</div>
<div class="cw-section-body">
...body...
</div>
<div class="cw-section-footer">
...footer...
</div>
</div>
<div class="cw-section cw-section-shadowed cw-section-drawer">
<div class="cw-section-header">
...header...
</div>
<div class="cw-section-body">
...body...
</div>
<div class="cw-section-footer">
...footer...
</div>
</div>
.cw-section-elegant<div class="cw-section cw-section-elegant">
<div class="cw-section-header">
...header...
</div>
<div class="cw-section-body">
...body...
</div>
<div class="cw-section-footer">
...footer...
</div>
</div>
.cw-section-simple<div class="cw-section cw-section-simple">
<div class="cw-section-header">
...header...
</div>
<div class="cw-section-body">
...body...
</div>
<div class="cw-section-footer">
...footer...
</div>
</div>
.cw-table<table class="cw-table">
<caption>...</caption>
<thead>
<tr>
<th>...<th>
<th>...<th>
</tr>
<tr>
<td>...<td>
<td>...<td>
</tr>
</thead>
<tfoot>
<tr>
<th>...<th>
<th>...<th>
</tr>
<tr>
<td>...<td>
<td>...<td>
</tr>
</tfoot>
<tbody>
<tr>
<th>...<th>
<th>...<th>
</tr>
<tr>
<td>...<td>
<td>...<td>
</tr>
</tbody>
</table>
| ... | ... | ||
|---|---|---|---|
| ... | ... | ||
| ... | ... | ||
| ... | ... |
.cw-table-padded<table class="cw-table cw-table-padded">
<tbody>
<tr>
<th>...<th>
<td>...<td>
</tr>
<tr>
<th>...<th>
<td>...<td>
</tr>
</tbody>
</table>
| ... | ... | ||
|---|---|---|---|
| ... | ... |
.cw-table-emphasizedcellsNote: Currently implemented using table only
<table class="cw-table cw-table-emphasizedcells">
<tbody>
<tr>
<th>...<th>
<td>...<td>
</tr>
<tr>
<th>...<th>
<td>...<td>
</tr>
</tbody>
</table>
| ... | ... | ||
|---|---|---|---|
| ... | ... |
.cw-table-sideheadersNote: Currently implemented using table only
<table class="cw-table cw-table-sideheaders">
<tbody>
<tr>
<th>...<th>
<td>...<td>
</tr>
<tr>
<th>...<th>
<td>...<td>
</tr>
</tbody>
</table>
| ... | ... | ||
|---|---|---|---|
| ... | ... |
.cw-table-sectionedNote: Currently implemented using table only
<table class="cw-table cw-table-sectioned">
<tbody>
<tr>
<th>...<th>
<td>...<td>
</tr>
<tr>
<th>...<th>
<td>...<td>
</tr>
</tbody>
</table>
| ... | ... | ||
|---|---|---|---|
| ... | ... |
.cw-table-fullsize<table class="cw-table cw-table-fullsize">
<tbody>
<tr>
<th>...<th>
<td>...<td>
</tr>
<tr>
<th>...<th>
<td>...<td>
</tr>
</tbody>
</table>
| ... | ... | ||
|---|---|---|---|
| ... | ... |
.cw-table-paginationNote: Currently implemented using table only
<table class="cw-table cw-table-pagination">
<tfoot>
<tr>
<th>← Previous</th>
<th>Next →</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>...</th>
<td>...</td>
</tr>
<tr>
<th>...</th>
<td>...</td>
</tr>
</tbody>
</table>
| ← Previous | Next → |
|---|---|
| ... | ... |
| ... | ... |
.cw-table-fauxtable<div class="cw-table cw-table-fauxtable">
<div class="cw-table-fauxrow">
<div class="cw-table-fauxcell">R1, C1</div>
<div class="cw-table-fauxcell">R1, C2</div>
</div>
<div class="cw-table-fauxrow">
<div class="cw-table-fauxcell">R2, C1</div>
<div class="cw-table-fauxcell">R2, C2</div>
</div>
</div>
<div class="cw-table cw-table-padded cw-table-fauxtable">
<div class="cw-table-fauxrow">
<div class="cw-table-fauxcell">R1, C1</div>
<div class="cw-table-fauxcell">R1, C2</div>
</div>
<div class="cw-table-fauxrow">
<div class="cw-table-fauxcell">R2, C1</div>
<div class="cw-table-fauxcell">R2, C2</div>
</div>
</div>
.cw-table-fauxrow<div class="cw-table cw-table-fauxtable">
<div class="cw-table-fauxrow">
<div class="cw-table-fauxcell">R1, C1</div>
<div class="cw-table-fauxcell">R1, C2</div>
</div>
<div class="cw-table-fauxrow">
<div class="cw-table-fauxcell">R2, C1</div>
<div class="cw-table-fauxcell">R2, C2</div>
</div>
</div>
.cw-table-fauxcell<div class="cw-table cw-table-fauxtable">
<div class="cw-table-fauxrow">
<div class="cw-table-fauxcell">R1, C1</div>
<div class="cw-table-fauxcell">R1, C2</div>
</div>
<div class="cw-table-fauxrow">
<div class="cw-table-fauxcell">R2, C1</div>
<div class="cw-table-fauxcell">R2, C2</div>
</div>
</div>
.cw-table-stripedNote: Currently implemented using table only
<table class="cw-table cw-table-striped">
<caption>...</caption>
<thead>
<tr>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tfoot>
<tr>
<th>...</th>
<th>...</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>...</th>
<td>...</td>
</tr>
<tr>
<th>...</th>
<td>...</td>
</tr>
</tbody>
</table>
<table class="cw-table cw-table-padded cw-table-striped">
<caption>...</caption>
<thead>
<tr>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tfoot>
<tr>
<th>...</th>
<th>...</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>...</th>
<td>...</td>
</tr>
<tr>
<th>...</th>
<td>...</td>
</tr>
</tbody>
</table>
<table class="cw-table cw-table-emphasizedcells cw-table-striped">
<tbody>
<tr>
<th>...</th>
<td>...</td>
</tr>
<tr>
<th>...</th>
<td>...</td>
</tr>
</tbody>
</table>
<table class="cw-table cw-table-sideheaders cw-table-striped">
<tbody>
<tr>
<th>...</th>
<td>...</td>
</tr>
<tr>
<th>...</th>
<td>...</td>
</tr>
</tbody>
</table>
<table class="cw-table cw-table-sectioned cw-table-striped">
<tbody>
<tr><th scope="rowspan" colspan="2">Section 1</th></tr>
<tr>
<th>...</th>
<td>...</td>
</tr>
<tr>
<th>...</th>
<td>...</td>
</tr>
</tbody>
<tbody>
<tr><th scope="rowspan" colspan="2">Section 2</th></tr>
<tr>
<th>...</th>
<td>...</td>
</tr>
<tr>
<th>...</th>
<td>...</td>
</tr>
</tbody>
</table>
<table class="cw-table cw-table-fullsize cw-table-striped">
<tbody>
<tr>
<th>...</th>
<td>...</td>
</tr>
<tr>
<th>...</th>
<td>...</td>
</tr>
</tbody>
</table>
<table class="cw-table cw-table-pagination cw-table-striped">
<tfoot>
<tr>
<th>← Previous</th>
<th>Next →</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>...</th>
<td>...</td>
</tr>
<tr>
<th>...</th>
<td>...</td>
</tr>
</tbody>
</table>
| ... | ... |
|---|---|
| ... | ... |
| ... | ... |
| ... | ... |
| ... | ... |
|---|---|
| ... | ... |
| ... | ... |
| ... | ... |
| ... | ... |
|---|---|
| ... | ... |
| ... | ... |
|---|---|
| ... | ... |
| Section 1 | |
|---|---|
| ... | ... |
| ... | ... |
| Section 2 | |
| ... | ... |
| ... | ... |
| ... | ... |
|---|---|
| ... | ... |
| ← Previous | Next → |
|---|---|
| ... | ... |
| ... | ... |
.cw-table-simpleNote: Currently implemented using table only
<table class="cw-table cw-table-simple">
<caption>...</caption>
<thead>
<tr>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tfoot>
<tr>
<th>...</th>
<th>...</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>...</th>
<td>...</td>
</tr>
<tr>
<th>...</th>
<td>...</td>
</tr>
</tbody>
</table>
<table class="cw-table cw-table-padded cw-table-simple">
<caption>...</caption>
<thead>
<tr>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tfoot>
<tr>
<th>...</th>
<th>...</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>...</th>
<td>...</td>
</tr>
<tr>
<th>...</th>
<td>...</td>
</tr>
</tbody>
</table>
<table class="cw-table cw-table-emphasizedcells cw-table-simple">
<tbody>
<tr>
<th>...</th>
<td>...</td>
</tr>
<tr>
<th>...</th>
<td>...</td>
</tr>
</tbody>
</table>
<table class="cw-table cw-table-sideheaders cw-table-simple">
<tbody>
<tr>
<th>...</th>
<td>...</td>
</tr>
<tr>
<th>...</th>
<td>...</td>
</tr>
</tbody>
</table>
<table class="cw-table cw-table-sectioned cw-table-simple">
<tbody>
<tr><th scope="rowspan" colspan="2">Section 1</th></tr>
<tr>
<th>...</th>
<td>...</td>
</tr>
<tr>
<th>...</th>
<td>...</td>
</tr>
</tbody>
<tbody>
<tr><th scope="rowspan" colspan="2">Section 2</th></tr>
<tr>
<th>...</th>
<td>...</td>
</tr>
<tr>
<th>...</th>
<td>...</td>
</tr>
</tbody>
</table>
<table class="cw-table cw-table-fullsize cw-table-simple">
<tbody>
<tr>
<th>...</th>
<td>...</td>
</tr>
<tr>
<th>...</th>
<td>...</td>
</tr>
</tbody>
</table>
<table class="cw-table cw-table-pagination cw-table-simple">
<tfoot>
<tr>
<th>← Previous</th>
<th>Next →</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>...</th>
<td>...</td>
</tr>
<tr>
<th>...</th>
<td>...</td>
</tr>
</tbody>
</table>
| ... | ... |
|---|---|
| ... | ... |
| ... | ... |
| ... | ... |
| ... | ... |
|---|---|
| ... | ... |
| ... | ... |
| ... | ... |
| ... | ... |
|---|---|
| ... | ... |
| ... | ... |
|---|---|
| ... | ... |
| Section 1 | |
|---|---|
| ... | ... |
| ... | ... |
| Section 2 | |
| ... | ... |
| ... | ... |
| ... | ... |
|---|---|
| ... | ... |
| ← Previous | Next → |
|---|---|
| ... | ... |
| ... | ... |
.cw-table-mapNote: Currently implemented using table only
<table class="cw-table cw-table-map">
<tbody>
<tr>
<th>...</th>
<td>...</td>
</tr>
<tr>
<th>...</th>
<td>...</td>
</tr>
</tbody>
</table>
<table class="cw-table cw-table-padded cw-table-map">
<tbody>
<tr>
<th>...</th>
<td>...</td>
</tr>
<tr>
<th>...</th>
<td>...</td>
</tr>
</tbody>
</table>
<table class="cw-table cw-table-sectioned cw-table-map">
<tbody>
<tr>
<th>...</th>
<td>...</td>
</tr>
<tr>
<th>...</th>
<td>...</td>
</tr>
</tbody>
<tbody>
<tr>
<th>...</th>
<td>...</td>
</tr>
<tr>
<th>...</th>
<td>...</td>
</tr>
</tbody>
</table>
<table class="cw-table cw-table-fullsize cw-table-map">
<tbody>
<tr>
<th>...</th>
<td>...</td>
</tr>
<tr>
<th>...</th>
<td>...</td>
</tr>
</tbody>
</table>
<table class="cw-table cw-table-pagination cw-table-map">
<tfoot>
<tr>
<th>← Previous</th>
<th>Next →</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>...</th>
<td>...</td>
</tr>
<tr>
<th>...</th>
<td>...</td>
</tr>
</tbody>
</table>
| ... | ... |
|---|---|
| ... | ... |
| ... | ... |
|---|---|
| ... | ... |
| ... | ... |
|---|---|
| ... | ... |
| ... | ... |
| ... | ... |
| ... | ... |
|---|---|
| ... | ... |
| ← Previous | Next → |
|---|---|
| ... | ... |
| ... | ... |
.cw-table-boxedNote: Currently implemented using table only
<table class="cw-table cw-table-boxed">
<tbody>
<tr>
<th>...</th>
<td>...</td>
</tr>
<tr>
<th>...</th>
<td>...</td>
</tr>
</tbody>
</table>
<table class="cw-table cw-table-padded cw-table-boxed">
<tbody>
<tr>
<th>...</th>
<td>...</td>
</tr>
<tr>
<th>...</th>
<td>...</td>
</tr>
</tbody>
</table>
<table class="cw-table cw-table-fullsize cw-table-boxed">
<tbody>
<tr>
<th>...</th>
<td>...</td>
</tr>
<tr>
<th>...</th>
<td>...</td>
</tr>
</tbody>
</table>
| ... | ... |
|---|---|
| ... | ... |
| ... | ... |
|---|---|
| ... | ... |
| ... | ... |
|---|---|
| ... | ... |
.cw-form<form class="cw-form">
<fieldset>
<legend><label>...</label></legend>
<ul>
<li><input type="..." value="..." /></li>
<li><input type="..." value="..." /></li>
<li><input type="..." value="..." /></li>
</ul>
</fieldset>
<fieldset>
<legend>...</legend>
<label>...</label>
<input type="..." value="..." />
<label>...</label>
<textarea>...</textarea>
<label>...</label>
<select>
<option value="...">...</option>
<option value="...">...</option>
</select>
</fieldset>
</form>
<form class="cw-form">
<label>...</label>
<input type="..." value="..." />
<label>...</label>
<textarea>...</textarea>
<label>...</label>
<select>
<option value="...">...</option>
<option value="...">...</option>
</select>
</form>
.cw-form-nonessential<form>
<p class="cw-form-nonessential">This is some helpful text pertaining to a form, but is not essential.</p>
<label class="cw-form-nonessential">Helpful Text</label>
<input type="text" value="..." />
</form>
.cw-form-required<form>
<label class="cw-form-required">Label</label>
<input type="text" class="cw-form-required" value="..." />
<p>A long-form message about <span class="cw-form-required">required</span> fields.</p>
</form>
.cw-form-error<form>
<label class="cw-form-error">Label</label>
<input type="text" class="cw-form-error" value="..." />
<ul class="cw-form-error">
<li>Error message</li>
<li>Error message</li>
</ul>
<p class="cw-form-error">A long-form <span class="cw-form-error">error</span> message.</p>
</form>
.cw-form-modified<form>
<label class="cw-form-modified">Label</label>
<input type="text" class="cw-form-modified" value="..." />
<ul class="cw-form-modified">
<li>Message about a modified field</li>
<li>Message about a modified field</li>
</ul>
<p class="cw-form-modified">A long-form message about <span class="cw-form-modified">modified</span> fields.</p>
</form>
.cw-list<ol class="cw-list">
<li>Ordered Item</li>
<li>Ordered Item</li>
<li>Ordered Item</li>
</ol>
<ul class="cw-list">
<li>Unordered Item</li>
<li>Unordered Item</li>
<li>Unordered Item</li>
</ul>
<dl class="cw-list">
<dt>Term</dt>
<dd>Definition</dd>
<dt>Term</dt>
<dd>Definition</dd>
</dl>
.cw-list-nobulletsNote: Currently implemented using ol and
ul only
<ol class="cw-list cw-list-nobullets">
<li>Ordered Item</li>
<li>Ordered Item</li>
<li>Ordered Item</li>
</ol>
<ul class="cw-list cw-list-nobullets">
<li>Unordered Item</li>
<li>Unordered Item</li>
<li>Unordered Item</li>
</ul>
.cw-list-noindentNote: Currently implemented using ol and
ul only
<ol class="cw-list cw-list-noindent">
<li>Ordered Item</li>
<li>Ordered Item</li>
<li>Ordered Item</li>
</ol>
<ul class="cw-list cw-list-noindent">
<li>Unordered Item</li>
<li>Unordered Item</li>
<li>Unordered Item</li>
</ul>
.cw-list-unmarkedNote: Currently implemented using ol and
ul only
<ol class="cw-list cw-list-unmarked">
<li>Ordered Item</li>
<li>Ordered Item</li>
<li>Ordered Item</li>
</ol>
<ul class="cw-list cw-list-unmarked">
<li>Unordered Item</li>
<li>Unordered Item</li>
<li>Unordered Item</li>
</ul>
.cw-list-horizontalNote: Currently implemented using ol,
ul, and dl only
<ol class="cw-list cw-list-horizontal">
<li>Ordered Item</li>
<li>Ordered Item</li>
<li>Ordered Item</li>
</ol>
<ul class="cw-list cw-list-horizontal">
<li>Unordered Item</li>
<li>Unordered Item</li>
<li>Unordered Item</li>
</ul>
<dl class="cw-list cw-list-horizontal">
<dt>Term</dt>
<dd>Definition</dd>
<dt>Term</dt>
<dd>Definition</dd>
</dl>
dl.cw-list-dictionaryNote: Currently implemented using dl only
<dl class="cw-list cw-list-dictionary">
<dt>Term</dt>
<dd>Definition</dd>
<dt>Term</dt>
<dd>Definition</dd>
</dl>