.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-group
Note: 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-popup
Note: 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-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-emphasizedcells
Note: 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-sideheaders
Note: 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-sectioned
Note: 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-pagination
Note: 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-striped
Note: 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-simple
Note: 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-map
Note: 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-boxed
Note: 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-nobullets
Note: 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-noindent
Note: 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-unmarked
Note: 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-horizontal
Note: 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-dictionary
Note: 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>