Skip to content

Instantly share code, notes, and snippets.

@tammalee
Created May 16, 2018 15:57
Show Gist options
  • Save tammalee/496d0b344e0186c6b4860bbce7c3144f to your computer and use it in GitHub Desktop.
Save tammalee/496d0b344e0186c6b4860bbce7c3144f to your computer and use it in GitHub Desktop.
HTML to copy and paste into a WordPress page to test element styling
<h1>Typography</h1>
<h2>Headings</h2>
<h1>This is an H1 heading</h1>
<h2>This is an H2 heading</h2>
<h3>This is an H3 heading</h3>
<h4>This is an H4 heading</h4>
<h5>This is an H5 heading</h5>
<h6>This is an H6 heading</h6>
<h2>Body text</h2>
Paragraph 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur auctor, nisi maximus auctor
faucibus, neque ligula finibus lectus, quis vestibulum orci lorem nec eros. Pellentesque suscipit, erat a cursus pharetra, purus dolor congue tellus, eget dignissim quam mi in metus. In efficitur magna quis fringilla malesuada. Praesent nec eleifend orci, quis pellentesque purus. Nulla facilisi. Nullam suscipit pellentesque neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent quis fringilla ligula. Nullam auctor nisl sed felis ultricies pretium. Maecenas eget enim et dolor vehicula volutpat. Nullam diam risus, dictum vitae congue ut, tempor semper lacus. Aliquam vitae sodales ex. Vivamus ante est, aliquet ut sem quis, commodo egestas augue. Curabitur eu nulla non nulla ultrices consequat. Quisque nec dui sagittis, rhoncus orci et, sodales odio. Suspendisse potenti.
<p class="small">Paragraph 2 with a small class. Praesent vulputate consequat pretium. Donec quis gravida turpis, vel tincidunt
tortor. Curabitur
dapibus vitae odio a dignissim. Sed vel consequat lorem. Sed nulla eros, luctus ac lorem eu, euismod rutrum justo. Nunc condimentum, magna sed scelerisque imperdiet, urna ante rutrum magna, id porttitor mi augue eget ipsum. Suspendisse ultrices nulla sapien, sit amet tempus neque tempus tincidunt. In tincidunt, nulla consectetur pretium varius, enim libero placerat eros, eget pharetra quam augue vel sapien. Nullam sed risus non risus tempor malesuada ac nec libero. Nullam in augue sollicitudin, lacinia urna vehicula, interdum eros. Morbi efficitur mauris tortor, eu mattis ex tempor ac. Aliquam erat volutpat. Mauris consequat odio ut neque pretium congue. Vestibulum quis eros finibus, vehicula ex sed, consectetur lorem.</p>
Paragraph 3. Mauris ullamcorper ultrices elementum. Phasellus auctor sapien sed ante elementum, quis egestas arcu
facilisis. Vestibulum in arcu dolor. Sed a iaculis tortor. Praesent euismod in leo id lobortis. Mauris nisl lectus, congue nec ante sed, convallis scelerisque lectus. Sed suscipit arcu ac venenatis consectetur. Phasellus arcu turpis, faucibus non sapien nec, laoreet tempor sapien.
<h2>Inline Text Elements</h2>
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
<h2>Lists</h2>
<ol>
<li>This is an ordered list item</li>
<li>This is an ordered list item</li>
<ol>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ol>
<li>This is an ordered list item</li>
<li>This is an ordered list item</li>
<li>This is an ordered list item</li>
</ol>
<ul>
<li>This is an unordered list item</li>
<li>This is an unordered list item</li>
<li>This is an unordered list item</li>
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
<li>This is an unordered list item</li>
<li>This is an unordered list item</li>
</ul>
<h2>Block Quotes</h2>
<blockquote>Nullam vestibulum egestas ex, sit amet placerat lectus ornare quis. In vitae vestibulum velit, vitae hendrerit dui. Duis at risus ac metus fringilla mattis at ultrices arcu. Fusce dignissim feugiat erat, eget finibus nunc dictum tempus. Suspendisse potenti. Praesent odio nibh, fermentum in luctus id, egestas id lectus. Etiam pulvinar.</blockquote>
<figure>
<blockquote cite="//dev.w3.org/html5/spec/grouping-content.html#the-blockquote-element">The blockquote element represents a section that is quoted from another source.</blockquote>
<figcaption>— <cite><a title="4.5 Grouping content — HTML5" href="http://dev.w3.org/html5/spec/grouping-content.html#the-blockquote-element">W3C HTML5 specification</a></cite></figcaption></figure>
<h2>Buttons</h2>
<button class="btn" type="button">Button button</button>
<a class="btn" href="#" role="button">Link button</a>
<h2>Form example - not Gravity forms</h2>
<form>
<label for="name">Name</label>
<input class="form-control" type="text" id="name">
<label for="email">Email address</label>
<input class="form-control" type="email" id="email">
<label>
<input type="checkbox"> Remember me
</label>
<label>
<input type="radio" id="herp" name="herpderp" checked> Herp
</label>
<label>
<input type="radio" id="derp" name="herpderp"> Derp
</label>
<button class="btn" type="submit">Submit</button>
</form>
<h2>Form Example - Gravity Form</h2>
[gravityform id="1" title="true" description="true"]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment