Cards

See Bootstrap docs
Basic card
Card Header
Special card title

With supporting text below as a natural lead-in to additional content.

Go somewhere
<div class="card shadow-light">
  <div class="card-header">
    Card Header
  </div>
  <div class="card-body">
    <h5 class="card-title">Special card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-purple shadow-light-sm mt-2">Go somewhere</a>
  </div>
</div>
Blog posts
How to remain calm when life gets real hard.

Inertia has both a web app and an android app to make your website.

David Gilmour
May 11
Learn how to take the best photos with a Leica.

Inertia has both a web app and an android app to make your website.

Ana Smith
Jul 22
<div class="row">
  <div class="col-lg-6">
    <div class="card h-100 shadow-light hover-lift-light">
      <a class="card-img-top" href="#">
        <img src="../assets/img/unsplash/41.jpeg" class="img-fluid rounded-top">
      </a>

      <div class="card-body">
        <a href="#" class="h4 text-dark text-decoration-none">
          How to remain calm when life gets real hard.
        </a>
        <p class="text-secondary mt-3">
          Inertia has both a web app and an android app to make your website.
        </p>
      </div>

      <div class="card-bottom-info">
        <div class="avatar avatar-sm">
          <img src="../assets/img/uifaces/5.jpg" class="avatar-image rounded-circle">
        </div>
        <span class="ml-2">
            David Gilmour
        </span>
        <div class="ml-auto">
          <i class="far fa-calendar fa-xs"></i>
            May 11
        </div>
      </div>
    </div>
  </div>

  <div class="col-lg-6">
    <div class="card h-100 shadow-light hover-lift-light">
      <a class="card-img-top" href="#">
        <img src="../assets/img/unsplash/41.jpeg" class="img-fluid rounded-top">
      </a>

      <div class="card-body">
        <a href="#" class="h4 text-dark text-decoration-none">
          Learn how to take the best photos with a Leica.
        </a>
        <p class="text-secondary mt-3">
          Inertia has both a web app and an android app to make your website.
        </p>
      </div>

      <div class="card-bottom-info">
        <div class="avatar avatar-sm">
          <img src="../assets/img/uifaces/8.jpg" class="avatar-image rounded-circle">
        </div>
        <span class="ml-2">
            Ana Smith
        </span>
        <div class="ml-auto">
          <i class="far fa-calendar fa-xs"></i>
            Jul 22
        </div>
      </div>
    </div>
  </div>
</div>
Pricing charts
Beginner
$ 29 /mo
3 Collaborators
10 Projects
1GB data storage
3% Transaction fee
Start your trial
Professional
$ 79 /mo
10 Collaborators
30 Projects
5GB data storage
Exclusive Support
1.5% Transaction fee
Choose this plan
Enterprise
$ 109 /mo
Unlimited collaborators
Unlimited projects
50GB data storage
VIP Support
No license needed
No transaction fee
Contact sales
<div class="row">
  <div class="col-xl-4">
    <div class="card shadow-light-sm">
      <div class="card-body">
        <h5 class="text-center">
          Beginner
        </h5>
        <div class="d-flex justify-content-center">
          <span class="h3 align-self-center mb-0">$</span>
          <span class="display-3">29</span>
          <span class="h4 align-self-end mb-3">/mo</span>
        </div>
        <div class="d-flex align-items-center mt-3">
          <i class="far fa-check-circle text-success"></i>
          <span class="ml-2">3 Collaborators</span>
        </div>
        <div class="d-flex align-items-center mt-3">
          <i class="far fa-check-circle text-success"></i>
          <span class="ml-2">10 Projects</span>
        </div>
        <div class="d-flex align-items-center mt-3">
          <i class="far fa-check-circle text-success"></i>
          <span class="ml-2">1GB data storage</span>
        </div>
        <div class="d-flex align-items-center mt-3">
          <i class="far fa-check-circle text-success"></i>
          <span class="ml-2">3% Transaction fee</span>
        </div>
        <a href="#" class="btn btn-pastel-primary btn-block btn-lg hover-lift-light mt-5">
          Start your trial
        </a>
      </div>
    </div>
  </div>

  <div class="col-xl-4 mt-4 mt-xl-0">
    <div class="card shadow-light-sm">
      <div class="card-body">
        <h5 class="text-center">
          Professional
        </h5>
        <div class="d-flex justify-content-center">
          <span class="h3 align-self-center mb-0">$</span>
          <span class="display-3">79</span>
          <span class="h4 align-self-end mb-3">/mo</span>
        </div>
        <div class="d-flex align-items-center mt-3">
          <i class="far fa-check-circle text-success"></i>
          <span class="ml-2">10 Collaborators</span>
        </div>
        <div class="d-flex align-items-center mt-3">
          <i class="far fa-check-circle text-success"></i>
          <span class="ml-2">30 Projects</span>
        </div>
        <div class="d-flex align-items-center mt-3">
          <i class="far fa-check-circle text-success"></i>
          <span class="ml-2">5GB data storage</span>
        </div>
        <div class="d-flex align-items-center mt-3">
          <i class="far fa-check-circle text-success"></i>
          <span class="ml-2">Exclusive Support</span>
        </div>
        <div class="d-flex align-items-center mt-3">
          <i class="far fa-check-circle text-success"></i>
          <span class="ml-2">1.5% Transaction fee</span>
        </div>
        <a href="#" class="btn btn-primary btn-block btn-lg hover-lift-light mt-5">
          Choose this plan
        </a>
      </div>
    </div>
  </div>

  <div class="col-xl-4 mt-4 mt-xl-0">
    <div class="card shadow-light-sm">
      <div class="card-body">
        <h5 class="text-center">
          Enterprise
        </h5>
        <div class="d-flex justify-content-center">
          <span class="h3 align-self-center mb-0">$</span>
          <span class="display-3">109</span>
          <span class="h4 align-self-end mb-3">/mo</span>
        </div>
        <div class="d-flex align-items-center mt-3">
          <i class="far fa-check-circle text-success"></i>
          <span class="ml-2">Unlimited collaborators</span>
        </div>
        <div class="d-flex align-items-center mt-3">
          <i class="far fa-check-circle text-success"></i>
          <span class="ml-2">Unlimited projects</span>
        </div>
        <div class="d-flex align-items-center mt-3">
          <i class="far fa-check-circle text-success"></i>
          <span class="ml-2">50GB data storage</span>
        </div>
        <div class="d-flex align-items-center mt-3">
          <i class="far fa-check-circle text-success"></i>
          <span class="ml-2">VIP Support</span>
        </div>
        <div class="d-flex align-items-center mt-3">
          <i class="far fa-check-circle text-success"></i>
          <span class="ml-2">No license needed</span>
        </div>
        <div class="d-flex align-items-center mt-3">
          <i class="far fa-check-circle text-success"></i>
          <span class="ml-2">No transaction fee</span>
        </div>
        <a href="#" class="btn btn-pastel-primary btn-block btn-lg hover-lift-light mt-5">
          Contact sales
        </a>
      </div>
    </div>
  </div>
</div>
Customer studies
basecamp-logo

Inertia is providing all necessary infrastructure so Basecamp can focus on what they do best, bringing the best project management systems for everyone.

Read full study

The great people at Stripe couldn't be happier with the results that Inertia has provided for them, all credit card payment processing went 3% last year.

Read full study
<div class="row">
  <div class="col-lg-6">
    <div class="card h-100 shadow-light hover-lift-light">
      <div class="card-body">
        <a href="#" class="d-block rounded bg-cover h-250" style="background-image: url('../assets/img/unsplash/72.jpeg');"></a>
        <div class="text-dark mt-4">@@include("../assets/img/svg/basecamp.svg")</div>
        <p>
          ...
        </p>
      </div>

      <a href="#" class="card-footer-btn btn btn-purple btn-lg">
        Read full study
        <i class="fa fa-arrow-right fa-sm ml-auto"></i>
      </a>
    </div>
  </div>

  <div class="col-lg-6 mt-6 mt-lg-0">
    <div class="card h-100 shadow-light hover-lift-light">
      <div class="card-body">
        <a href="#" class="d-block rounded bg-cover h-250" style="background-image: url('../assets/img/unsplash/69.jpeg');"></a>
        <div class="text-dark mt-4">@@include("../assets/img/svg/stripe.svg")</div>
        <p>
          ...
        </p>
      </div>

      <a href="#" class="card-footer-btn btn btn-purple btn-lg">
        Read full study
        <i class="fa fa-arrow-right fa-sm ml-auto"></i>
      </a>
    </div>
  </div>
</div>