Card
Marketing feature cards
Use this template to feature product content on marketing oriented webpages.
Find the right API
Browse our comprehensive API library
Learn and build code
Learn how to use our APIs to power your applications
Launch your application
Register your account and request access to APIs
<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>