This file contains several UI components for testing styles within a Wordpress page content. To use it, create a page in Wordpress and then copy the content of this gist and paste it in the wysiwyg of the page you just created

BOI-Kitchen-sink.html

<h1>Headings</h1>
<span style="display:block; margin:10px 0; border-bottom: 3px solid #ddd"></span>
<h1>h1. This is 1st level heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, numquam, quam porro sint repellendus voluptate consequuntur necessitatibus quidem! Ullam quis rerum excepturi odio similique facilis. Recusandae accusantium, dolorem maxime ipsum.</p>
<h2>h2. This is 2nd level heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, numquam, quam porro sint repellendus voluptate consequuntur necessitatibus quidem! Ullam quis rerum excepturi odio similique facilis. Recusandae accusantium, dolorem maxime ipsum.</p>
<h3>h3. This is 3rd level heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, numquam, quam porro sint repellendus voluptate consequuntur necessitatibus quidem! Ullam quis rerum excepturi odio similique facilis. Recusandae accusantium, dolorem maxime ipsum.</p>
<h4>h4. This is 4th level heading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, numquam, quam porro sint repellendus voluptate consequuntur necessitatibus quidem! Ullam quis rerum excepturi odio similique facilis. Recusandae accusantium, dolorem maxime ipsum.</p>
<h5>h5. This is 5th level heading</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, numquam, quam porro sint repellendus voluptate consequuntur necessitatibus quidem! Ullam quis rerum excepturi odio similique facilis. Recusandae accusantium, dolorem maxime ipsum.</p>
<h6>h6. This is 6th level heading</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, numquam, quam porro sint repellendus voluptate consequuntur necessitatibus quidem! Ullam quis rerum excepturi odio similique facilis. Recusandae accusantium, dolorem maxime ipsum.</p>

<h1>Blockquote</h1>
<span style="display:block; margin:10px 0; border-bottom: 3px solid #ddd"></span>
<blockquote>This is a block quotation containing a single paragraph. Well, not quite, since this is not <em>really</em> quoted text, but I hope you understand the point. After all, this page does not use HTML markup very normally anyway.</blockquote>


<h1>Lists</h1>
<span style="display:block; margin:10px 0; border-bottom: 3px solid #ddd"></span>

<h3>Unordered list (after a paragraph)</h3> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum provident tempore quos molestias repellendus repellat porro ab voluptatem impedit enim architecto voluptates, aut assumenda accusantium voluptas ipsa quam itaque veritatis.</p>
<ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li>Impedit nisi magnam molestias.</li>
    <li>mollitia praesentium explicabo eveniet impedit adipisci! Quam quibusdam ut assumenda ad.</li>
    <li>Four. Officia consequatur sint quas blanditiis maiores labore.</li>
</ul>
<h3>Ordered list</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum provident tempore quos molestias repellendus repellat porro ab voluptatem impedit enim architecto voluptates, aut assumenda accusantium voluptas ipsa quam itaque veritatis.</p>
<ol>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li>Impedit nisi magnam molestias.</li>
    <li>mollitia praesentium explicabo eveniet impedit adipisci! Quam quibusdam ut assumenda ad.</li>
    <li>Four. Officia consequatur sint quas blanditiis maiores labore.</li>
</ol>
<h1>Images alignment</h1>
<span style="display:block; margin:10px 0; border-bottom: 3px solid #ddd"></span>

<div class="clearfix">
  
    <img class="alignleft" src="http://placehold.it/300" /> 
      <h4>Left aligned</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis sit quod laboriosam, quos cupiditate vero, rerum pariatur? Debitis nemo porro, enim quod eius autem ullam saepe. Sint, officiis, dolor. Fugit.</p>
</div>
<hr>
<div class="clearfix">
    <h4>Center aligned</h4> 
    <p>This image needs <code>width</code> attribute in order to be centered.</p>
    <img class="aligncenter" src="http://placehold.it/300" width="300px" />
</div>
<hr>
<div class="clearfix">
    <h4>Right aligned</h4>
    <img class="alignright" src="http://placehold.it/300" /> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis sit quod laboriosam, quos cupiditate vero, rerum pariatur? Debitis nemo porro</p>
</div>
<hr>
<h1>Iframes (Youtube videos and Google maps)</h1> 
<span style="display:block; margin:10px 0; border-bottom: 3px solid #ddd"></span>

<h3>Youtube</h3>
<p>This iframe has 2000px width, so the CSS comes in and prevents an overflow by setting its max-width to 100%</p>
<iframe width="2000" height="315" src="https://www.youtube.com/embed/7XxmoptT5Yc" frameborder="0" allowfullscreen></iframe>

<h3>Google map</h3>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2382.587068419859!2d-6.26773808405349!3d53.33274648343071!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48670c1fdf3965e3%3A0x12cdedf64be1e0cf!2sSister+Sadie!5e0!3m2!1sen!2sie!4v1469443003274" width="1000" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<h1>Document sets</h1>
<span style="display:block; margin:10px 0; border-bottom: 3px solid #ddd"></span>

<div class="document-set">
    <div class="supportDocument js-supportDocument ">
        <a href="#" class="clearfix" target="_blank" title="">
            <i class="supportDocument__icon fa fa-file-pdf-o" title="PDF"></i>
            <div class="supportDocument__actions js-supportDocument-actions ">
                <span class="supportDocument__title" title="Smarter Banking brochure - PDF">Lorem ipsum</span><span class="supportDocument__cta external-link " title="View PDF">View</span>
                <span class="supportDocument__cta print" title="Print PDF">Print</span>
            </div>
        </a>
    </div>
    <div class="supportDocument js-supportDocument ">
        <a href="#" class="clearfix" target="_blank" title="">
            <i class="supportDocument__icon fa fa-file-pdf-o" title="PDF"></i>
            <div class="supportDocument__actions js-supportDocument-actions ">
                <span class="supportDocument__title" title="Smarter Banking brochure - PDF">Repudiandae facere.</span><span class="supportDocument__cta external-link " title="View PDF">View</span>
                <span class="supportDocument__cta print" title="Print PDF">Print</span>
            </div>
        </a>
    </div>
    <div class="supportDocument js-supportDocument ">
        <a href="#" class="clearfix" target="_blank" title="">
            <i class="supportDocument__icon fa fa-file-pdf-o" title="PDF"></i>
            <div class="supportDocument__actions js-supportDocument-actions ">
                <span class="supportDocument__title" title="Smarter Banking brochure - PDF">Laboriosam doloribus, tempore ratione unde qui</span><span class="supportDocument__cta external-link " title="View PDF">View</span>
                <span class="supportDocument__cta print" title="Print PDF">Print</span>
            </div>
        </a>
    </div>
</div>
<h1>Support Accodions</h1>
<span style="display:block; margin:10px 0; border-bottom: 3px solid #ddd"></span>

<ul class="supportAccordion accordion js-supportAccordion" data-accordion="">
    <li class="accordion-navigation ">
        <a href="#faq-panel-25161" class="faq-link" title="Facilis eius rerum saepe vitae voluptate veniam ad, possimus maxime. Id, adipisci, ipsam?" aria-expanded="false">
               Accordion item with lists inside
        </a>
        <div id="faq-panel-25161" class="content ">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas repellat adipisci deleniti laborum ipsam placeat nesciunt, reiciendis dolore, consequatur temporibus, aut sequi, cumque ducimus inventore nostrum dolorem quis in ut.</p>

            <ul>
                <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus totam fugiat, a! Blanditiis .</li>
                <li>Rem a quisquam autem. Labore tempore, earum, natus enim esse voluptates neque omnis! </li>
                <li>Aut doloribus distinctio possimus praesentium sed labore voluptas soluta sequi sunt ipsa. </li>
            </ul>

            <div class="wasThisHelpful">
                <div class="wasThisHelpful__body">
                    <div class="wasThisHelpful__text">
                        Was this helpful?
                    </div>
                    <div class="wasThisHelpful__actions">
                        <ul class="button-group tiny radius " style="display: inline-block">
                            <li style="padding:0">
                                <a href="" class="muted button" title="Yes">
                Yes
        </a>
                            </li>
                            <li style="padding: 0">
                                <a href="" class="muted button" title="No">
                No
        </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="wasThisHelpful__msg" style="display:none">Thank you for your feedback!</div>
            </div>
        </div>
    </li>
    <li class="accordion-navigation ">
        <a href="#faq-panel-2" class="faq-link" title=" voluptate." aria-expanded="false">
               Hic quos, officiis cupiditate voluptatibus ipsum. Accusantium 
        </a>
        <div id="faq-panel-2" class="content ">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas repellat adipisci deleniti laborum ipsam placeat nesciunt, reiciendis dolore, consequatur temporibus, aut sequi, cumque ducimus inventore nostrum dolorem quis in ut.</p>
            <div class="wasThisHelpful">
                <div class="wasThisHelpful__body">
                    <div class="wasThisHelpful__text">
                        Was this helpful?
                    </div>
                    <div class="wasThisHelpful__actions">
                        <ul class="button-group tiny radius " style="display: inline-block">
                            <li style="padding:0">
                                <a href="" class="muted button" title="Yes">
                Yes
        </a>
                            </li>
                            <li style="padding: 0">
                                <a href="" class="muted button" title="No">
                No
        </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="wasThisHelpful__msg" style="display:none">Thank you for your feedback!</div>
            </div>
        </div>
    </li>
    <li class="accordion-navigation ">
        <a href="#faq-panel-3" class="faq-link" title=" dolor quod laboriosam iste quis repellendus, a, ipsa necessitatibus dolorem praesentium corporis deleniti adipisci inventore?" aria-expanded="false">
               Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </a>
        <div id="faq-panel-3" class="content ">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas repellat adipisci deleniti laborum ipsam placeat nesciunt, reiciendis dolore, consequatur temporibus, aut sequi, cumque ducimus inventore nostrum dolorem quis in ut.</p>
            <div class="wasThisHelpful">
                <div class="wasThisHelpful__body">
                    <div class="wasThisHelpful__text">
                        Was this helpful?
                    </div>
                    <div class="wasThisHelpful__actions">
                        <ul class="button-group tiny radius " style="display: inline-block">
                            <li style="padding:0">
                                <a href="" class="muted button" title="Yes">
                Yes
        </a>
                            </li>
                            <li style="padding: 0">
                                <a href="" class="muted button" title="No">
                No
        </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="wasThisHelpful__msg" style="display:none">Thank you for your feedback!</div>
            </div>
        </div>
    </li>
</ul>

<h1>Support Accodions</h1>
<span style="display:block; margin:10px 0; border-bottom: 3px solid #ddd"></span>


<ul class="tabs" data-tab>
  <li class="tab-title active"><a href="#panel1">Testing list within tabs</a></li>
  <li class="tab-title"><a href="#panel2">Testing list within tabs</a></li>

</ul>
<div class="tabs-content">
  <div class="content active" id="panel1">
    <p>Lorem ipsum sit amet dolor </p>
<ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li>Impedit nisi magnam molestias.</li>
    <li>mollitia praesentium explicabo eveniet impedit adipisci! Quam quibusdam ut assumenda ad.</li>
    <li>Four. Officia consequatur sint quas blanditiis maiores labore.</li>
</ul>
  </div>
  <div class="content" id="panel2">
    <p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p>
<ol>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li>Impedit nisi magnam molestias.</li>
    <li>mollitia praesentium explicabo eveniet impedit adipisci! Quam quibusdam ut assumenda ad.</li>
    <li>Four. Officia consequatur sint quas blanditiis maiores labore.</li>
</ol>
  </div>

</div>