<h2>Primary Button styles</h2>
<hr>

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-outline-primary">Primary Outline</button>
<button type="button" class="btn btn-link">Link</button>
<hr>
<button type="button" class="btn btn-primary btn-block">Primary Block</button>
<button type="button" class="btn btn-outline-primary btn-block">Primary Outline Block</button>
<button type="button" class="btn btn-link btn-block">Link Block</button>

<hr>
<h2>Premium Button styles</h2>
<hr>

<button type="button" class="btn btn-primary premium">Premium</button>
<button type="button" class="btn btn-outline-primary premium">Premium Outline</button>
<button type="button" class="btn btn-link premium">Premium Link</button>
<hr>
<button type="button" class="btn btn-primary btn-block premium">Premium Block</button>
<button type="button" class="btn btn-outline-primary btn-block premium">Premium Outline Block</button>
<button type="button" class="btn btn-link btn-block premium">Premium Link Block</button>

<hr>
<h2>Alternate markup for displaying buttons</h2>
<hr>

<a class="btn btn-primary" href="#" role="button">&lt;a class="btn btn-primary"&gt;</a>
<input class="btn btn-primary" type="button" value="<input class=&quot;btn btn-primary&quot;>">

<hr>
<h2>Other buttons.</h2>
<p>Not part of the mybigpoint Theme. Do not use unless you've got a really good reason.</p>
<hr>

<button type="button" class="btn">Button without style</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<hr>
<button type="button" class="btn btn-outline-secondary">Secondary Outline</button>
<button type="button" class="btn btn-outline-success">Success Outline</button>
<button type="button" class="btn btn-outline-danger">Danger Outline</button>
<button type="button" class="btn btn-outline-warning">Warning Outline</button>
<button type="button" class="btn btn-outline-info">Info Outline</button>
<button type="button" class="btn btn-outline-light">Light Outline</button>
<button type="button" class="btn btn-outline-dark">Dark Outline</button>

<h2>Default</h2>
<a class="label">Label</a>
<a class="label label-primary">Label Primary</a>
<a class="label label-light">Label Light</a>
<a class="label premium ">Label Premium</a>
<hr>
<h2>Large</h2>
<a class="label label-lg">Label-lg</a>
<a class="label label-lg label-primary">Label-lg Primary</a>
<a class="label label-lg label-light">Label-lg Light</a>
<a class="label label-lg premium ">Label-lg Premium</a>

<div class="accordion-container">
    <div class="accordion-section collapsed">
        <div class="accordion-head">
            <a href="#actionurl">
                <h1>Accordion Head 1: "collapsed"</h1>
            </a>
        </div>
    </div>
    <div class="accordion-section expanded">
        <div class="accordion-head">
            <a href="#actionurl">
                <h1>Accordion Head 2: "expanded"</h1>
            </a>
        </div>
        <div class="accordion-body">
            <p>Accordion Content 2. In this variant, only the sections that are marked with "expanded" are open (collapsed sections don't even require an accordion-body div). Opening a different accordion section requires server-side code, controlled by the links put on the headers.</p>
        </div>
    </div>
    <div class="accordion-section disabled">
        <div class="accordion-head">
            <a href="#actionurl">
                <h1>Accordion Head 3: "disabled"</h1>
            </a>
        </div>
    </div>
</div>

<div class="accordion-container">
    <div class="accordion-section">
        <input type="checkbox" id="randomNamespace-1">
        <div class="accordion-head">
            <label for="randomNamespace-1">
                <h1>Accordion Head 1</h1>
            </label>
        </div>
        <div class="accordion-body">
            <p>Accordion Content 1, initially collapsed.</p>
        </div>
    </div>
    <div class="accordion-section">
        <input type="checkbox" id="randomNamespace-2" checked="">
        <div class="accordion-head">
            <label for="randomNamespace-2">
                <h1>Accordion Head 2</h1>
            </label>
        </div>
        <div class="accordion-body">
            <p>Accordion Content 2, initially expanded.</p>
        </div>
    </div>
    <div class="accordion-section">
        <input type="checkbox" id="randomNamespace-3">
        <div class="accordion-head">
            <label for="randomNamespace-3">
                <h1>Accordion Head 3</h1>
            </label>
        </div>
        <div class="accordion-body">
            <p>Accordion Content 3, initially collapsed.</p>
        </div>
    </div>
    <div class="accordion-section disabled">
        <div class="accordion-head">
            <label>
                <h1>Accordion Head 4: "disabled"</h1>
            </label>
        </div>
    </div>
</div>

<h1>Headline 1</h1>
<p>A paragraph to the headline to show off the spacing.</p>

<h1 class="text-center">Headline 1 (centered)</h1>
<p>This is getting repetitive with the paragraphs, but we need them to check the vertical space. Please bear with us.</p>

<h2>Headline 2</h2>
<p>Bearing the burden of a wall of text is the life of the designer.</p>

<h2 class="text-center">Headline 2 (centered)</h2>
<p>It's getting a bit better when you center the headline. It produces a more ragged look, and may disturb the reading flow, but here we are.</p>

<h3>Headline 3</h3>
<p>This headline is hardly bigger than the text itself. But sometimes it is needed.</p>

<h3 class="text-center">Headline 3 (centered)</h3>
<p>Below this paragraph is: Vertical Space, Horizontal Rule without gutters, Vertical Space, Paragraph, Vertical Space, Horizontal Rule with gutters, Vertical Space</p>
<div class="py-3">
</div>
<hr class="m-0 pb-3">
<div class="py-3">
</div>
<p>Paragraph: Lorem ipsum Dolores. Kokolores has a lot of strange puppies. The big svelte fork hops under the spacious caravan tilt. If you're gonna read this, I'm never gonna give you up. The Green Mario goes on a quest to be called Luigi, as that is is name. </p>
<div class="py-3">
</div>
<hr>
<div class="py-3">
</div>
<p>Above this paragraph is the end of: Vertical Space, Horizontal Rule without gutters, Vertical Space, Paragraph, Vertical Space, Horizontal Rule with gutters, Vertical Space.</p>

<hr class="m-0 pb-3"/>
<div class="py-3"></div>
<h1 class="text-center">Headline with border and space</h1>
<div class="py-3"></div>
<hr class="m-0 pb-3"/>

<p>Yet another Paragraph. It is short.</p>
<p>Stop reading this text. It is not meant to be read. If you continue to read it, it will follow you. It will stalk you. It will haunt you. It will be slower than you, but it never needs to rest. It will always be just out of sight. Until it is behind you, raising that spoon.<br/> You can use a line break without using a new paragraph, but it disturbs the text flow. Just don't.</p>