source.css

Buttons

            
<div class="button-container">
    <button>Button</button>
    <button class="button-primary">Primary</button>
    <button class="button-secondary">Secondary</button>
    <button class="button-tertiary">Tertiary</button>
    <button class="button-danger">Danger</button>
    <button class="button-warning">Warning</button>
    <button class="button-success">Success</button>
</div>
            
        

Text

Anchors

Anchor Anchor Primary Anchor Secondary Anchor Tertiary
            
<a href="#">Anchor</a>
<a href="#" class="anchor-primary">Anchor Primary</a>
<a href="#" class="anchor-secondary">Anchor Secondary</a>
<a href="#" class="anchor-tertiary">Anchor Tertiary</a>
            
        

Blockquote

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante."
            
<blockquote>
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante."
    <footer>
        Someone famous in <cite title="Source Title">Cited Source Title</cite>
    </footer>
</blockquote>
            
        

Code Blocks

Collapsable Code Block

Full Code Block

filename
            
<div class="code-block collapsable" id="code-block" >
    <div class="top-bar">
        <div class="top-bar-element clickable" onclick="toggleCodeBlock('code-block')">
            <svg width="72px" height="20px" viewBox="0 0 72 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
                <circle cx="12" cy="10" r="8" fill="#FF5F56" stroke="#E0443E" stroke-width="2px">
                </circle>
                <circle cx="34" cy="10" r="8" fill="#FFBD2E" stroke="#DEA123" stroke-width="2px">
                </circle>
                <circle cx="58" cy="10" r="8" fill="#27C93F" stroke="#1AAB29" stroke-width="2px">
                </circle>
            </svg>
        </div>
        <div class="top-bar-element">
            <div>filename</div>
        </div>
        <div class="top-bar-element">
            <button class="copy-button" onclick="copyToClipboard('copy-id')">Copy</button>
        </div>
    </div>
    <pre class="code-block-body">
        <code class="language-py" id="copy-id">
        </code>
    </pre>
</div>
            
        

Mini Code Block

Font Size 1

            
<div class="code-block">
    <pre class="code-block-body font-size-1">
        <code class="language-html">
...
        </code>
    </pre>
</div>
            
        

Font Size 2

            
<div class="code-block">
    <pre class="code-block-body font-size-2">
        <code class="language-html">
...
        </code>
    </pre>
</div>
            
        

Font Size 3

            
<div class="code-block">
    <pre class="code-block-body font-size-3">
        <code class="language-html">
    ...
        </code>
    </pre>
</div>