Marx Documentation
HTML Elements
<main> = Container
<main>
<footer></footer>
</main>
Typography
Headings
h1 small h1
h2 small h2
h3 small h3
h4 small h4
h5 small h5
h6 small h6
<h1>h1
<small>small h1</small>
</h1>
<h2>h2
<small>small h2</small>
</h2>
<h3>h3
<small>small h3</small>
</h3>
<h4>h4
<small>small h4</small>
</h4>
<h5>h5
<small>small h5</small>
</h5>
<h6>h6
<small>small h6</small>
</h6>
Body copy
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi ipsa tempore alias illum, in dicta sed laboriosam inventore sequi, accusantium magnam dolores modi commodi, magni labore illo a quisquam incidunt.
strong tag, b tag, em tag, italic tag, underline tag
"Capitalism? More like CRAPitalism, am I right?"
- Karl Marx, probably.
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>
<strong>strong</strong>
<b>b</b>
<em>em</em>
<italic>italic</italic>
<underline>underline</underline>
</p>
<figcaption>Hello, world!</figcaption>
<blockquote>Hello, world!</blockquote>
Code
pre {
background: #efefef;
color: #444;
display: block;
font-family: Menlo, monospace;
font-size: 1.4rem;
margin-bottom: .8remrem;
padding: 1.6rem;
word-break: break-all;
word-wrap: break-word;
}
code {
background: #efefef;
color: #444;
font-family: Menlo, monospace;
font-size: 1.4rem;
word-break: break-all;
word-wrap: break-word;
}
<pre>
<code>So meta</code>
</pre>
Lists
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
- Lorum Ipsum
- Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Lorum Ipsum
- Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<ul>
<li>Unordered list</li>
<li><a href="#">Unordered links</a></li>
</ul>
<ol>
<li>Ordered list</li>
<li><a href="#">Ordered links</a></li>
</ol>
<dl>
<dt>Description list title</dt>
<dd>Description</dd>
</dl>
Buttons
<input type="submit" value="Submit">
<button>Button</button>
<a href="#"><button>Button Link</button></a>
Forms
Tables
One | Two | Three | Four |
---|---|---|---|
One | Two | Three | Four |
One | Two | Three | Four |
One | Two | Three | Four |
<table>
<thead>
<tr>
<th>One</th>
<th>Two</th>
</tr>
</thead>
<tbody>
<tr>
<td>One</td>
<td>Two</td>
</tr>
</tbody>
</table>