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