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

Hello, world!
"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

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  3. 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

Text Inputs


  
  <label for="text">Text:</label>
  <input type="text" name="text" id="text" tab-index="1" placeholder="text"></input>

  <label for="textarea">Text Area:</label>
  <textarea rows="4" cols="27" id="textarea" placeholder="textarea"></textarea>

Radio Buttons


  
  <label for="radio">Radio:</label>
  <input type="radio" name="radio" id="radio" tab-index="1" value="true"></input>

Checkbox Buttons


  
  <label for="checkbox">Checkbox</label>
  <input type="checkbox" name="checkbox" id="checkbox"></input>

Dropdown Choices


  
  <label for="drop">Dropdown</label>
  <select name="drop" id="drop">
    <option value="drop1">One</option>
    <option value="drop2">Two</option>
    <option value="drop3">Three</label>
  </select>

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>