---
title: Calcite Web
description: Quickly build beautiful, consistent websites with the Calcite Web Framework
active: overview
---

{% block content %}
<div class="grid-container">

  <div class="column-24">
    <div class="column-7 post-1 leader-5  tablet-leader-0">
      <h2>The Essentials</h2>
      <p>The core Calcite Web framework has all the basics for creating robust, on-brand projects. With a solid <a href="{{relativePath}}examples/core/">foundation</a>, a responsive <a href="{{relativePath}}examples/grid/">grid</a>, and <a href="{{relativePath}}examples/navigation/">four layers of navigation</a>, your project can be up and running in no time.</p>
    </div>
    <div class="column-16 leader-3">
      <div class="block-group block-group-3-up tablet-block-group-2-up phone-block-group-1-up">
        <div class="card block trailer-1">
          <a href="{{relativePath}}examples/core/"><img class="card-image" src="{{relativePath}}assets/img/docs/basic.svg"></a>
          <div class="card-content">
            <h4 class="font-size-1 trailer-half"><a href="{{relativePath}}examples/core/">Basic Pages</a></h4>
            <p class="trailer-0 font-size--1">Get started with these things you're for sure going to need.</p>
          </div>
        </div>
        <div class="card block trailer-1">
          <a href="{{relativePath}}examples/grid/"><img class="card-image" src="{{relativePath}}assets/img/docs/grid-simple.svg"></a>
          <div class="card-content">
            <h4 class="font-size-1 trailer-half"><a href="{{relativePath}}examples/grid/">Grid System</a></h4>
            <p class="trailer-0 font-size--1">Make Müller-Brockman proud with a twenty-four column grid.</p>
          </div>
        </div>
        <div class="card block trailer-1">
          <a href="{{relativePath}}examples/navigation"><img class="card-image" src="{{relativePath}}assets/img/docs/navigation.svg"></a>
          <div class="card-content">
            <h4 class="font-size-1 trailer-half"><a href="{{relativePath}}examples/navigation">Navigation</a></h4>
            <p class="trailer-0 font-size--1">Keep your information architectures organized and accessible.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="column-24">
    <div class="column-7 post-1 leader-5 tablet-leader-0">
      <h2>Need More?</h2>
      <p>Simple extensions provide new patterns for specific use cases. Not everyone needs a carousel, but sometimes you do.</p>
    </div>
    <div class="column-16 leader-3">
      <div class="block-group block-group-3-up tablet-block-group-2-up phone-block-group-1-up">
        <div class="card block trailer-1">
          <a href="{{relativePath}}examples/marketing/"><img class="card-image" src="{{relativePath}}assets/img/docs/marketing.svg"></a>
          <div class="card-content">
            <h4 class="font-size-1 trailer-half"><a href="{{relativePath}}examples/marketing/">Marketing</a></h4>
            <p class="trailer-0 font-size--1">Common components for marketing pages like image switchers and carousels</p>
          </div>
        </div>
        <div class="card block trailer-1">
          <a href="{{relativePath}}examples/e-commerce/"><img class="card-image" src="{{relativePath}}assets/img/docs/e-commerce.svg"></a>
          <div class="card-content">
            <h4 class="font-size-1 trailer-half"><a href="{{relativePath}}examples/e-commerce/">E-Commerce</a></h4>
            <p class="trailer-0 font-size--1">Must-have patterns for e-commerce sites like pricing tables</p>
          </div>
        </div>
        <div class="card block trailer-1">
          <a href="{{relativePath}}examples/i18n/"><img class="card-image" src="{{relativePath}}assets/img/docs/i18n.svg"></a>
          <div class="card-content">
            <h4 class="font-size-1 trailer-half"><a href="{{relativePath}}examples/i18n/">Localization</a></h4>
            <p class="trailer-0 font-size--1">See how text renders in over thirty languages</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}