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>

Category cards

This template can be used to visually represent categories or groups to help browse and filter data.

<div class="chi-grid">
  <div class="chi-col -w--12 -w-md--6 -w-lg--4 -w-xl--3 -mb--3">
    <a href="#" class="chi-card -s--1 -rounded -b--base-light -h--100 -hover--animate chi-link -no-hover-underline">
      <div class="-d--flex -align-items--center -justify-content--center -bg--info-light -p--3">
        <chi-marketing-icon icon="products-services" variant="outline"></chi-marketing-icon>
      </div>
      <div class="chi-card__content -p--3 -h--100 -justify-content--between">
        <div class="chi-card__text">
          <div class="chi-card__title">Business Management</div>
          <div class="chi-card__caption -text--body -mt--1">A full suite of supporting APIs designed to make daily business operations simple and easy to use.</div>
        </div>
        <div class="chi-link -cta -mt--2">Learn More</div>
      </div>
    </a>
  </div>
  <div class="chi-col -w--12 -w-md--6 -w-lg--4 -w-xl--3 -mb--3">
    <a href="#" class="chi-card -s--1 -rounded -b--base-light -h--100 -hover--animate chi-link -no-hover-underline">
      <div class="-d--flex -align-items--center -justify-content--center -bg--info-light -p--3">
        <chi-marketing-icon icon="people-it-professional" variant="outline"></chi-marketing-icon>
      </div>
      <div class="chi-card__content -p--3 -h--100 -justify-content--between">
        <div class="chi-card__text">
          <div class="chi-card__title">CenturyLink Partners</div>
          <div class="chi-card__caption -text--body -mt--1">Configure CenturyLink products, services, and purchased for your customers on cloud-based CRM platforms.</div>
        </div>
        <div class="chi-link -cta -mt--2">Learn More</div>
      </div>
    </a>
  </div>
  <div class="chi-col -w--12 -w-md--6 -w-lg--4 -w-xl--3 -mb--3">
    <a href="#" class="chi-card -s--1 -rounded -b--base-light -h--100 -hover--animate chi-link -no-hover-underline">
      <div class="-d--flex -align-items--center -justify-content--center -bg--info-light -p--3">
        <chi-marketing-icon icon="products-private-branch-exchange" variant="outline"></chi-marketing-icon>
      </div>
      <div class="chi-card__content -p--3 -h--100 -justify-content--between">
        <div class="chi-card__text">
          <div class="chi-card__title">Communications</div>
          <div class="chi-card__caption -text--body -mt--1">Supports reliable and easy-to-use voice API products that help keep your team and customers in sync.</div>
        </div>
        <div class="chi-link -cta -mt--2">Learn More</div>
      </div>
    </a>
  </div>
  <div class="chi-col -w--12 -w-md--6 -w-lg--4 -w-xl--3 -mb--3">
    <a href="#" class="chi-card -s--1 -rounded -b--base-light -h--100 -hover--animate chi-link -no-hover-underline">
      <div class="-d--flex -align-items--center -justify-content--center -bg--info-light -p--3">
        <chi-marketing-icon icon="platform-edge-compute" variant="outline"></chi-marketing-icon>
      </div>
      <div class="chi-card__content -p--3 -h--100 -justify-content--between">
        <div class="chi-card__text">
          <div class="chi-card__title">Edge Services</div>
          <div class="chi-card__caption -text--body -mt--1">APIs to create, delete, and monitor edge instances.</div>
        </div>
        <div class="chi-link -cta -mt--2">Learn More</div>
      </div>
    </a>
  </div>
  <div class="chi-col -w--12 -w-md--6 -w-lg--4 -w-xl--3 -mb--3">
    <a href="#" class="chi-card -s--1 -rounded -b--base-light -h--100 -hover--animate chi-link -no-hover-underline">
      <div class="-d--flex -align-items--center -justify-content--center -bg--info-light -p--3">
        <chi-marketing-icon icon="business-trust-confidence" variant="outline"></chi-marketing-icon>
      </div>
      <div class="chi-card__content -p--3 -h--100 -justify-content--between">
        <div class="chi-card__text">
          <div class="chi-card__title">Lumen Channel Partners</div>
          <div class="chi-card__caption -text--body -mt--1">Integrate service availability, pricing, and business management APIs to create differentiated customer experiences.</div>
        </div>
        <div class="chi-link -cta -mt--2">Learn More</div>
      </div>
    </a>
  </div>
  <div class="chi-col -w--12 -w-md--6 -w-lg--4 -w-xl--3 -mb--3">
    <a href="#" class="chi-card -s--1 -rounded -b--base-light -h--100 -hover--animate chi-link -no-hover-underline">
      <div class="-d--flex -align-items--center -justify-content--center -bg--info-light -p--3">
        <chi-marketing-icon icon="products-cce-dynamic-connections" variant="outline"></chi-marketing-icon>
      </div>
      <div class="chi-card__content -p--3 -h--100 -justify-content--between">
        <div class="chi-card__text">
          <div class="chi-card__title">Networking</div>
          <div class="chi-card__caption -text--body -mt--1">Deliver software-defined networking that intelligently adjusts to real-time capacity, and connects cloud providers.</div>
        </div>
        <div class="chi-link -cta -mt--2">Learn More</div>
      </div>
    </a>
  </div>
  <div class="chi-col -w--12 -w-md--6 -w-lg--4 -w-xl--3 -mb--3">
    <a href="#" class="chi-card -s--1 -rounded -b--base-light -h--100 -hover--animate chi-link -no-hover-underline">
      <div class="-d--flex -align-items--center -justify-content--center -bg--info-light -p--3">
        <chi-marketing-icon icon="platform-connected-security" variant="outline"></chi-marketing-icon>
      </div>
      <div class="chi-card__content -p--3 -h--100 -justify-content--between">
        <div class="chi-card__text">
          <div class="chi-card__title">Security</div>
          <div class="chi-card__caption -text--body -mt--1">Embed hi-fi intelligence, automatic threat detection and proactive response to identify and mitigate cyberattacks.</div>
        </div>
        <div class="chi-link -cta -mt--2">Learn More</div>
      </div>
    </a>
  </div>
  <div class="chi-col -w--12 -w-md--6 -w-lg--4 -w-xl--3 -mb--3">
    <a href="#" class="chi-card -s--1 -rounded -b--base-light -h--100 -hover--animate chi-link -no-hover-underline">
      <div class="-d--flex -align-items--center -justify-content--center -bg--info-light -p--3">
        <chi-marketing-icon icon="business-single-provider" variant="outline"></chi-marketing-icon>
      </div>
      <div class="chi-card__content -p--3 -h--100 -justify-content--between">
        <div class="chi-card__text">
          <div class="chi-card__title">Browse All APIs</div>
          <div class="chi-card__caption -text--body -mt--1">Browse our comprehensive API library</div>
        </div>
        <div class="chi-link -cta -mt--2">Explore All APIs</div>
      </div>
    </a>
  </div>
</div>