# Cards

Our cards provide a flexible and extensible content container with multiple variants and options.

Bootstrap Documentation
Show code

##### Card title

Some quick example text....

Go somewhere

    <div class="card">
        <img class="card-img-top" src="../../assets/img/theme/light/placeholder.png" alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text....</p>
            <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
        </div>
    </div>

## Feature

Show code
300+ components

Built to be customized.

    <div class="card shadow-none">
        <div class="p-3 d-flex">
            <div>
                <div class="icon icon-shape rounded-circle bg-success text-white mr-4">
                    <i data-feather="check"></i>
                </div>
            </div>
            <div>
                <span class="h6">300+ components</span>
                <p class="text-sm text-muted mb-0">
                    Built to be customized.
                </p>
            </div>
        </div>
    </div>

Show code

##### Modular

All components are built to be used in any combination.

    <div class="card hover-translate-y-n10 hover-shadow-lg">
        <div class="card-body">
            <div class="pb-4">
                <img alt="Image placeholder" src="../../assets/img/svg/icons/Code.svg" class="svg-inject" style="height: 50px; width: 50px;">

            </div>
            <div class="pt-2 pb-3">
                <h5>Modular</h5>
                <p class="text-muted mb-0">
                    All components are built to be used in any combination.
                </p>
            </div>
        </div>
    </div>

Show code

##### Modular

All components are built to be used in any combination.

    <div class="card hover-translate-y-n10 hover-shadow-lg">
        <div class="card-body">
            <div class="pb-4">
                <div class="icon bg-dark text-white rounded-circle icon-shape shadow">
                    <i data-feather="droplet"></i>
                </div>
            </div>
            <div class="pt-2 pb-3">
                <h5>Modular</h5>
                <p class="text-muted mb-0">
                    All components are built to be used in any combination.
                </p>
            </div>
        </div>
    </div>

## Illustrations

Show code
New

##### Listen to the nature

Design made simple with a clean and smart HTML markup.

    <div class="card mb-5 hover-translate-y-n10">
        <div class="d-flex p-5">
            <div>
                <span class="badge badge-warning badge-pill">New</span>
            </div>
            <div class="pl-4">
                <h5>Listen to the nature</h5>
                <p>
                    Design made simple with a clean and smart HTML markup.
                </p>
            </div>
        </div>
        <div>
            <img src="../../assets/img/svg/illustrations/illustration-5.svg" class="img-fluid img-center" style="height: 200px;" />
        </div>
    </div>

## Authentication

Show code

###### Login

Sign in to your account to continue.

Email address
Password
Show password
or
Github
Google
Not registered? Create account

    <div class="card mb-0" style="max-width: 28rem;">
        <div class="p-5">
            <div>
        <div class="mb-5 text-center">
            <h6 class="h3 mb-1">Login</h6><p class="text-muted mb-0">Sign in to your account to continue.</p></div>
        <span class="clearfix"></span><form>
        <div class="form-group">
            <label class="form-control-label">Email address</label>
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text"><i data-feather="user"></i></span>
                </div>
                <input type="email" class="form-control" id="input-email" placeholder="name@example.com">
            </div>
        </div>
        <div class="form-group mb-0">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <label class="form-control-label">Password</label>
                </div>
                <div class="mb-2">
                    <a href="#" class="small text-muted text-underline--dashed border-primary" data-toggle="password-text" data-target="#input-password">Show password</a>
                </div>
            </div>
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text"><i data-feather="key"></i></span>
                </div>
                <input type="password" class="form-control" id="input-password" placeholder="Password">
            </div>
        </div>

        <div class="mt-4">
            <button type="button" class="btn btn-block btn-primary">Sign in</button></div>
    </form>

        <div class="py-3 text-center">
            <span class="text-xs text-uppercase">or</span>
        </div>
        <!-- Alternative login -->
        <div class="row">
            <div class="col-sm-6">
                <a href="#" class="btn btn-block btn-neutral btn-icon mb-3 mb-sm-0">
                    <span class="btn-inner--icon"><img src="../../assets/img/icons/brands/github.svg" alt="Image placeholder"></span>
                    <span class="btn-inner--text">Github</span>
                </a>
            </div>
            <div class="col-sm-6">
                <a href="#" class="btn btn-block btn-neutral btn-icon">
                    <span class="btn-inner--icon"><img src="../../assets/img/icons/brands/google.svg" alt="Image placeholder"></span>
                    <span class="btn-inner--text">Google</span>
                </a>
            </div>
        </div>

        <!-- Links -->
        <div class="mt-4 text-center"><small>Not registered?</small>
            <a href="card.html" class="small font-weight-bold">Create account</a></div>
    </div>

        </div>
    </div>

## Call to action

Show code

##### Do you gave any questions about Quick.

Our support team is available for you anytime.

Contact us

    <div class="card shadow-lg border-0" style="max-width: 100%;">
        <div class="card-body px-5 py-5 text-center text-md-left">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <h5 class="mb-2">Do you gave any questions about Quick.</h5>
                    <p class="mb-0">
                        Our support team is available for you anytime.
                    </p>
                </div>
                <div class="col-12 col-md-6 mt-4 mt-md-0 text-md-right">
                    <a href="#" class="btn btn-warning btn-icon rounded-pill">
                        <span class="btn-inner--icon">
                            <i data-feather="phone"></i>
                        </span>
                        <span class="btn-inner--text">Contact us</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

Show code
Quick

##### Infinite solutions with only one template.

With an intuitive markup, powerful and lightning fast build tools, Quick has everything you need to turn your ideas into incredible products.

Learn more

    <div class="card bg-section-dark border-0 rounded-lg" style="max-width: 100%;">
        <div class="card-body px-5">
            <div class="row">
                <div class="col-md-6">
                    <div class="d-flex align-items-center align-items-center mb-3">
                        <div>
                            <div class="icon icon-sm icon-shape bg-warning text-white rounded-circle mr-3">
                                <i data-feather="airplay"></i>
                            </div>
                        </div>
                        <span class="h6 text-white mb-0">Quick</span>
                    </div>
                    <h5 class="text-white pt-4">Infinite solutions with only one template.</h5>
                    <p class="text-white opacity-8">
                        With an intuitive markup, powerful and lightning fast build tools, Quick has everything you need to turn your ideas into incredible products.
                    </p>
                </div>
                <div class="col-12 col-md-6 mt-4 mt-md-0 pr-4 pb-3 d-flex align-items-end justify-content-md-end">
                    <a href="#" class="btn btn-white btn-icon">
                        <span class="btn-inner--text">Learn more</span>
                        <span class="btn-inner--icon">
                            <i data-feather="arrow-right" class="text-warning"></i>
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </div>