@extends('layouts.app')
@section('content')
    <div class="content-heading">
        <div>
            Colors
            <small>Color swatches</small>
        </div>
    </div>
    <div class="card card-default">
        <div class="card-body">
            <div class="row row-flush">
                <div class="col-12 col-md-4">
                    <div class="box-placeholder b0 w-100 bg-primary-light">.bg-primary-light</div>
                </div>
                <div class="col-12 col-md-4">
                    <div class="box-placeholder b0 w-100 bg-primary">.bg-primary</div>
                </div>
                <div class="col-12 col-md-4">
                    <div class="box-placeholder b0 w-100 bg-primary-dark">.bg-primary-dark</div>
                </div>
            </div>
            <div class="row row-flush">
                <div class="col-12 col-md-4">
                    <div class="box-placeholder b0 w-100 bg-success-light">.bg-success-light</div>
                </div>
                <div class="col-12 col-md-4">
                    <div class="box-placeholder b0 w-100 bg-success">.bg-success</div>
                </div>
                <div class="col-12 col-md-4">
                    <div class="box-placeholder b0 w-100 bg-success-dark">.bg-success-dark</div>
                </div>
            </div>
            <div class="row row-flush">
                <div class="col-12 col-md-4">
                    <div class="box-placeholder b0 w-100 bg-info-light">.bg-info-light</div>
                </div>
                <div class="col-12 col-md-4">
                    <div class="box-placeholder b0 w-100 bg-info">.bg-info</div>
                </div>
                <div class="col-12 col-md-4">
                    <div class="box-placeholder b0 w-100 bg-info-dark">.bg-info-dark</div>
                </div>
            </div>
            <div class="row row-flush">
                <div class="col-12 col-md-4">
                    <div class="box-placeholder b0 w-100 bg-warning-light">.bg-warning-light</div>
                </div>
                <div class="col-12 col-md-4">
                    <div class="box-placeholder b0 w-100 bg-warning">.bg-warning</div>
                </div>
                <div class="col-12 col-md-4">
                    <div class="box-placeholder b0 w-100 bg-warning-dark">.bg-warning-dark</div>
                </div>
            </div>
            <div class="row row-flush">
                <div class="col-12 col-md-4">
                    <div class="box-placeholder b0 w-100 bg-danger-light">.bg-danger-light</div>
                </div>
                <div class="col-12 col-md-4">
                    <div class="box-placeholder b0 w-100 bg-danger">.bg-danger</div>
                </div>
                <div class="col-12 col-md-4">
                    <div class="box-placeholder b0 w-100 bg-danger-dark">.bg-danger-dark</div>
                </div>
            </div>
            <div class="row row-flush">
                <div class="col-12 col-md-4">
                    <div class="box-placeholder b0 w-100 bg-inverse-light">.bg-inverse-light</div>
                </div>
                <div class="col-12 col-md-4">
                    <div class="box-placeholder b0 w-100 bg-inverse">.bg-inverse</div>
                </div>
                <div class="col-12 col-md-4">
                    <div class="box-placeholder b0 w-100 bg-inverse-dark">.bg-inverse-dark</div>
                </div>
            </div>
            <div class="row row-flush">
                <div class="col-12 col-md-4">
                    <div class="box-placeholder b0 w-100 bg-green-light">.bg-green-light</div>
                </div>
                <div class="col-12 col-md-4">
                    <div class="box-placeholder b0 w-100 bg-green">.bg-green</div>
                </div>
                <div class="col-12 col-md-4">
                    <div class="box-placeholder b0 w-100 bg-green-dark">.bg-green-dark</div>
                </div>
            </div>
            <div class="row row-flush">
                <div class="col-12 col-md-4">
                    <div class="box-placeholder b0 w-100 bg-pink-light">.bg-pink-light</div>
                </div>
                <div class="col-12 col-md-4">
                    <div class="box-placeholder b0 w-100 bg-pink">.bg-pink</div>
                </div>
                <div class="col-12 col-md-4">
                    <div class="box-placeholder b0 w-100 bg-pink-dark">.bg-pink-dark</div>
                </div>
            </div>
            <div class="row row-flush">
                <div class="col-12 col-md-4">
                    <div class="box-placeholder b0 w-100 bg-purple-light">.bg-purple-light</div>
                </div>
                <div class="col-12 col-md-4">
                    <div class="box-placeholder b0 w-100 bg-purple">.bg-purple</div>
                </div>
                <div class="col-12 col-md-4">
                    <div class="box-placeholder b0 w-100 bg-purple-dark">.bg-purple-dark</div>
                </div>
            </div>
            <div class="row row-flush">
                <div class="col-12 col-md-4">
                    <div class="box-placeholder b0 w-100 bg-yellow-light">.bg-yellow-light</div>
                </div>
                <div class="col-12 col-md-4">
                    <div class="box-placeholder b0 w-100 bg-yellow">.bg-yellow</div>
                </div>
                <div class="col-12 col-md-4">
                    <div class="box-placeholder b0 w-100 bg-yellow-dark">.bg-yellow-dark</div>
                </div>
            </div>
            <div class="row row-flush">
                <div class="col text-center d-flex">
                    <div class="box-placeholder b0 w-100 bg-gray-darker">.bg-gray-darker</div>
                </div>
                <div class="col text-center d-flex">
                    <div class="box-placeholder b0 w-100 bg-gray-dark">.bg-gray-dark</div>
                </div>
                <div class="col text-center d-flex">
                    <div class="box-placeholder b0 w-100 bg-gray">.bg-gray</div>
                </div>
                <div class="col text-center d-flex">
                    <div class="box-placeholder b0 w-100 bg-gray-light">.bg-gray-light</div>
                </div>
                <div class="col text-center d-flex">
                    <div class="box-placeholder b0 w-100 bg-gray-lighter">.bg-gray-lighter</div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('styles')@endsection
@section('scripts')@endsection
