Card

A collection of templates built with responsive Cards.

Marketing feature cards

Use this template to feature product content on marketing oriented webpages.

Find the right API

Browse our comprehensive API library

Explore APIs
Learn and build code

Learn how to use our APIs to power your applications

View Guide
Launch your application

Register your account and request access to APIs

Get Started
<div class="chi-grid">
  <div class="chi-col -w--12 -w-lg--6 -w-xl--4 -mb--5">
    <div class="chi-card -s--2 -rounded -bg--white -b--base-light -mx--1 -h--100">
      <div class="-d--flex -align-items--center -justify-content--center -bg--grey-10 -p--3">
        <chi-marketing-icon icon="people-it-professional" size="lg"></chi-marketing-icon>
      </div>
      <div class="chi-card__content -p--4 -pb--6">
        <div class="-text--h3 -text--bolder -m--0">Find the right API</div>
        <p class="-text">Browse our comprehensive API library</p>
        <chi-link href="#" cta>Explore APIs</chi-link>
      </div>
    </div>
  </div>
  <div class="chi-col -w--12 -w-lg--6 -w-xl--4 -mb--5">
    <div class="chi-card -s--2 -rounded -bg--white -b--base-light -mx--1 -h--100">
      <div class="-d--flex -align-items--center -justify-content--center -bg--grey-10 -p--3">
        <chi-marketing-icon icon="people-software-developer" size="lg"></chi-marketing-icon>
      </div>
      <div class="chi-card__content -p--4 -pb--6">
        <div class="-text--h3 -text--bolder -m--0">Learn and build code</div>
        <p class="-text">Learn how to use our APIs to power your applications</p>
        <chi-link href="#" cta>View Guide</chi-link>
      </div>
    </div>   
  </div>
  <div class="chi-col -w--12 -w-lg--6 -w-xl--4 -mb--5">
    <div class="chi-card -s--2 -rounded -bg--white -b--base-light -mx--1 -h--100">
      <div class="-d--flex -align-items--center -justify-content--center -bg--grey-10 -p--3">
        <chi-marketing-icon icon="products-portal" size="lg"></chi-marketing-icon>
      </div>
      <div class="chi-card__content -p--4 -pb--6">
        <div class="-text--h3 -text--bolder -m--0">Launch your application</div>
        <p class="-text">Register your account and request access to APIs</p>
        <chi-link href="#" cta>Get Started</chi-link>
      </div>
    </div>
  </div>
</div>