<template>
    <div class="p-medium">
        <div class="n-flex flex-stretched flex-gap-large">
            <div class="md:col-6">
                <h2>Buttons</h2>

                <div class="gridlines">
                    <div class="n-flex flex-gap-small">
                        <button class="n-button">Default</button>
                        <button class="n-button color-primary">Primary</button>
                        <button class="n-button color-secondary">Secondary</button>
                        <button class="n-button color-danger">Danger</button>
                        <button class="n-button color-warning">Warning</button>
                        <button class="n-button color-success">Success</button>
                        <button class="n-button color-notice">Notice</button>
                        <button class="n-button color-black">Black</button>
                        <button class="n-button outlined">Outlined</button>
                        <button class="n-button ghost">Ghost</button>
                        <button class="n-button color-primary radius-circle"><i class="fas fa-user"></i></button>
                        <button class="n-button color-secondary loading">Loading</button>
                        <button class="n-button color-primary disabled">Disabled</button>
                    </div>
                </div>
            </div>

            <div class="md:col-6">

            </div>

            <div class="md:col-6">
                <h2>Headings</h2>

                <div class="gridlines">
                    <h1 class="highlight">Heading 1</h1>
                </div>

                <div class="gridlines">
                    <h2 class="highlight">Heading 2</h2>
                </div>

                <div class="gridlines">
                    <h3 class="highlight">Heading 3</h3>
                </div>

                <div class="gridlines">
                    <h4 class="highlight">Heading 4</h4>
                </div>

                <div class="gridlines">
                    <h5 class="highlight">Heading 5</h5>
                </div>

                <div class="gridlines">
                    <h6 class="highlight">Heading 6</h6>
                </div>
            </div>

            <div class="md:col-6">
                <h2>Texts</h2>

                <div class="gridlines">
                    <div class="p-medium">
                        <div class="n-text n-label text-primary highlight">
                            Lorem ipsum
                        </div>
                        <div class="n-help highlight">
                            dolor sit amet consectetur adipiscing elit
                        </div>
                    </div>
                </div>

                <div class="gridlines">
                    <div class="p-medium">
                        <p class="n-text text-small text-success highlight">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        </p>
                    </div>
                </div>

                <div class="gridlines">
                    <div class="p-medium">
                        <p class="n-text highlight">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        </p>
                    </div>
                </div>

                <div class="gridlines">
                    <div class="p-medium">
                        <p class="n-text text-large text-primary highlight">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        </p>
                    </div>
                </div>

                <div class="gridlines">
                    <div class="p-medium">
                        <p class="n-text text-xlarge text-secondary highlight">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        </p>
                    </div>
                </div>

                <div class="gridlines">
                    <div class="p-medium">
                        <p class="n-text highlight">
                            <span class="n-uppercase">Lorem ipsum</span>
                            <span class="n-strong">dolor sit amet</span>,
                            <span>consectetur adipiscing</span>
                            <span class="n-lowercase">ELIT</span>.
                        </p>
                    </div>
                </div>

                <div class="gridlines">
                    <div class="p-medium">
                        <code class="n-code highlight">
                            x = y * 2
                        </code>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
