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

Get Started

Web Component
HTML Blueprint

<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>