Unlimited Websites Cpanel Hosting Only $0.99 per month - Click here

Card

Create layout boxes with different styles.

Usage

Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Butter Cake components. They have no margin by default so use spacing utilities as needed.

Card Title

card body

      <div class="card">
        <div class="card-header">
          <h4 class="card-title">Card Title</h4>
        </div>

        <div class="card-body">
          card body
        </div>

        <div class="card-footer">
          card footer
        </div>
      </div>
      

Shadow Effect

Butter Cake comes with .shadow and .shadow-1 utility,
Which will give you shadow effect with hover

Card Title

.shadow

Card Title

.shadow-1

Sample Cards

Thumbnail [100%x150]

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos, esse deserunt doloremque odit voluptatibus quos?

Click Me
Thumbnail [100%x150]
Title

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos, esse deserunt doloremque odit voluptatibus quos?

Click Me

Style modifiers

Simply use Butter Cake's background utility classes.

Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum odit numquam laudantium cupiditate, ullam cumque.

Primary

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum odit numquam laudantium cupiditate, ullam cumque.

Secondary

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum odit numquam laudantium cupiditate, ullam cumque.

      <div class="row">

        <div class="col-md-4 col-sm-6 mb-2">
          <div class="card">
            <div class="card-header">
              <h4 class="card-title">Default</h4>
            </div>
            <div class="card-body">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum odit numquam laudantium cupiditate, ullam cumque.
            </div>
          </div>
        </div>

        <div class="col-md-4 col-sm-6 mb-2">
          <div class="card bg-primary text-white">
            <div class="card-header bg-primary">
              <h4 class="card-title">Primary</h4>
            </div>
            <div class="card-body bg-primary">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum odit numquam laudantium cupiditate, ullam cumque.
            </div>
          </div>
        </div>

        <div class="col-md-4 col-sm-6 mb-2">
          <div class="card bg-secondary text-white">
            <div class="card-header bg-secondary">
              <h4 class="card-title">Secondary</h4>
            </div>
            <div class="card-body bg-secondary">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum odit numquam laudantium cupiditate, ullam cumque.
            </div>
          </div>
        </div>

      </div>
      

We hope you have enjoyed using Butter Cake and if you feel like it has helped you out and want to support the team you can help us by donating or backing us on Patreon. Any amount would help support and continue development on this project and is greatly appreciated.

Patreon