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