Aerial.css

v

Simple Cards

Cards are essentials components of the aerial design style.

A simple card will use the following classes

<div class="elevation1 p-xlarge fill-white m-l-r-auto radius6 text-center">
  <h2> I'm a card </h2>
</div>

I'm a card

Complex cards

There is a way to make slightly more complex cards

To use complex cards, you'll have to copy this extra file: _cards.scss

1 - Small cards

<div class="al-card small-card m300 text-center inline m-r-large">
  <div class="card-title">Hello world</div>
  <div class="card-icon">
    <svg>
      <use xlink:href="#search-icon"></use>
    </svg>
  </div>
  <div class="card-text">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quisquam nesciunt iure doloremque quaerat iusto architecto.</p>
  </div>
</div>
<div class="al-card small-card m300 text-center inline m-r-large">
  <div class="card-title">Hello world</div>
  <div class="card-icon">
    <svg>
      <use xlink:href="#arrow-right"></use>
    </svg>
  </div>
  <div class="card-text">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quisquam nesciunt iure doloremque quaerat iusto architecto.</p>
  </div>
</div>
Hello world

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quisquam nesciunt iure doloremque quaerat iusto architecto.

Hello world

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quisquam nesciunt iure doloremque quaerat iusto architecto.

2 - Card border quote

<div class="col-md-12">
  <div class="col-md-6 p-large">
    <div class="card-border-quote pos-rel">
      <div class="card-container pos-rel radius6 elevation1 p-large fill-white h300">
        <div class="card-border-line gradient-tertiary pos-abt"></div>
        <div class="card-header text-xxl text-center p-t-small"><i class="brands-aftership color-bunting icon text-xl"></i></div>
        <div class="card-content text-center">
          <p class="color-portage">“Algolia's average response time to a support ticket is just a few hours whereas any ticket submitted to previous services we've used would take about two days.”</p>
        </div>
      </div>
      <div class="spacer16"></div>
      <div class="spacer8"></div>
      <div class="quote-author w100p m200 m-l-r-auto"><img class="avatar" alt="Teddy Chan Avatar" data-lazy="https://www.algolia.com/static_assets/images/home/teddy-chan-5699a9b1.jpg" title="images/home/teddy-chan-5699a9b1.jpg" src="https://www.algolia.com/static_assets/images/home/teddy-chan-5699a9b1.jpg"/>
        <div class="author-infos text-regular"><span class="inline w100p color-bunting text-bold">Teddy Chan</span><span class="inline w100p color-portage">Co-Founder & CEO, Aftership</span></div>
      </div>
    </div>
  </div>
  <div class="col-md-6 p-large">
    <div class="card-border-quote pos-rel">
      <div class="card-container pos-rel radius6 elevation1 p-large fill-white h300">
        <div class="card-border-line gradient-tertiary pos-abt"></div>
        <div class="card-header text-xxl text-center p-t-small"><i class="brands-aftership color-bunting icon text-xl"></i></div>
        <div class="card-content text-center">
          <p class="color-portage">“Algolia's average response time to a support ticket is just a few hours whereas any ticket submitted to previous services we've used would take about two days.”</p>
        </div>
      </div>
      <div class="spacer16"></div>
      <div class="spacer8"></div>
      <div class="quote-author w100p m200 m-l-r-auto"><img class="avatar" alt="Teddy Chan Avatar" data-lazy="https://www.algolia.com/static_assets/images/home/teddy-chan-5699a9b1.jpg" title="images/home/teddy-chan-5699a9b1.jpg" src="https://www.algolia.com/static_assets/images/home/teddy-chan-5699a9b1.jpg"/>
        <div class="author-infos text-regular"><span class="inline w100p color-bunting text-bold">Teddy Chan</span><span class="inline w100p color-portage">Co-Founder & CEO, Aftership</span></div>
      </div>
    </div>
  </div>
</div>

“Algolia's average response time to a support ticket is just a few hours whereas any ticket submitted to previous services we've used would take about two days.”

Teddy Chan Avatar
Teddy ChanCo-Founder & CEO, Aftership

“Algolia's average response time to a support ticket is just a few hours whereas any ticket submitted to previous services we've used would take about two days.”

Teddy Chan Avatar
Teddy ChanCo-Founder & CEO, Aftership

3 - Card border

<div class="col-md-12 card fill-white elevation2 z-10 radius6 text-center card-border pos-rel p-xlarge">
  <div class="card-border-line gradient-secondary"></div>
  <h2>Some text</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione cupiditate vitae dolor possimus aperiam, minus reiciendis nobis in dignissimos minima vero harum necessitatibus, illum totam provident qui eaque architecto dolores!</p>
</div>

Some text

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione cupiditate vitae dolor possimus aperiam, minus reiciendis nobis in dignissimos minima vero harum necessitatibus, illum totam provident qui eaque architecto dolores!

4 - Card border metric

The cards border metric will help you showing interesting metrics in aerial cards!

  <div class="row">
   <div class="col-sm-4">
      <div class="card-container pos-rel radius6 elevation1 p-large fill-white h300">
         <div class="card-border-line gradient-orange pos-abt"></div>
         <div class="card-header text-lg text-center"><i class="brands-alittlemarket icon"></i></div>
         <div class="card-content text-center">
            <div class="spacer16"></div>
            <div class="card-number color-bittersweet text-heading text-thin">+10% </div>
            <div class="spacer24"></div>
            <h3 class="color-bunting m-b-none">Conversion rate</h3>
            <i class="color-portage">Compared to former search solution.</i>
         </div>
      </div>
   </div>
   <div class="col-sm-4">
      <div class="card-container pos-rel radius6 elevation1 p-large fill-white h300">
         <div class="card-border-line gradient-orange pos-abt"></div>
         <div class="card-header text-lg text-center"><i class="brands-balinea icon"></i></div>
         <div class="card-content text-center">
            <div class="spacer16"></div>
            <div class="card-number color-bittersweet text-heading text-thin">+20% </div>
            <div class="spacer24"></div>
            <h3 class="color-bunting m-b-none">Conversion rate</h3>
            <i class="color-portage">Compared to former search solution.</i>
         </div>
      </div>
   </div>
   <div class="col-sm-4">
      <div class="card-container pos-rel radius6 elevation1 p-large fill-white h300">
         <div class="card-border-line gradient-orange pos-abt"></div>
         <div class="card-header text-lg text-center"><i class="brands-birchbox icon"></i></div>
         <div class="card-content text-center">
            <div class="spacer16"></div>
            <div class="card-number color-bittersweet text-heading text-thin">+13% </div>
            <div class="spacer24"></div>
            <h3 class="color-bunting m-b-none">Average order value</h3>
            <i class="color-portage">Compared to former search solution.</i>
         </div>
      </div>
   </div>
</div>
+10%

Conversion rate

Compared to former search solution.
+20%

Conversion rate

Compared to former search solution.
+13%

Average order value

Compared to former search solution.

Buttons

Algolia.com and other algolia websites are using a collection of buttons adapted for any cases

Note that they can take two kinds of shadow.

Use .btn-shadow to use a colored shadow, and .btn-shadow-dark to get a dark shadow.

<a class="btn btn-static-default" href="#">Static button default</a>
<div class="cf spacer16"></div>
<a class="btn btn-static-primary" href="#">Static button primary</a>
<div class="cf spacer16"></div>
<a class="btn btn-static-secondary" href="#">Static button secondary</a>
<div class="cf spacer16"></div>
<a class="btn btn-static-tertiary" href="#">Static button tertiary</a>
<div class="cf spacer16"></div>
<a class="btn btn-static-theme" href="#">Static button theme</a>
<div class="cf spacer16"></div>
<a class="btn btn-static-inverse fill-bunting" href="#">Static button inverse</a>
<div class="cf spacer16"></div>
<a class="btn btn-static-dark" href="#">Static button dark</a>
<div class="cf spacer16"></div>

Buttons with icon

<a class="btn btn-static-default" href="#">Static button default <i class="icon icon-arrow-right"></i></a>
<div class="cf spacer16"></div>
<a class="btn btn-static-primary" href="#">Static button primary <i class="icon icon-arrow-right"></i></a>
<div class="cf spacer16"></div>
<a class="btn btn-static-secondary" href="#">Static button secondary <i class="icon icon-arrow-right"></i></a>
<div class="cf spacer16"></div>
<a class="btn btn-static-tertiary" href="#">Static button tertiary <i class="icon icon-arrow-right"></i></a>
<div class="cf spacer16"></div>
<a class="btn btn-static-theme" href="#">Static button theme <i class="icon icon-arrow-right"></i></a>
<div class="cf spacer16"></div>
<a class="btn btn-static-inverse fill-bunting" href="#">Static button inverse <i class="icon icon-arrow-right"></i></a>
<div class="cf spacer16"></div>
<a class="btn btn-static-dark" href="#">Static button dark <i class="icon icon-arrow-right"></i></a>
<div class="cf spacer16"></div>

Diagonals

Diagonals are an important part of the layouts of Aerial design

They are made using a mixin, and can take a few different parameters

@mixin diagonal($rotation, $background, $height, $pos: after)
  &:#{$pos}
    content: ''
    display: block
    position: absolute
    width: 100%
    height: $height
    background: 
    transform: skewY($rotation)
    z-index: 0

    @media (min-width: $screen-lg)
      transform: skewY($rotation/2)

    @content

Use it like the following

section.demo-diagonal
  @include diagonal(-4deg, $bunting, 230px, after)
    bottom: -120px
    left: 0
<div class="fill-titan">
  <div class="spacer32"></div>
  <section class="h300 text-center demo-diagonal pos-rel">
    <h4>Hello world</h4>
  </section>
</div>

Hello world

Forms

There is some forms components that we use

To use the forms, you'll have to copy this extra file: _input-groups.scss ( Bootstrap )

Please not that for this component, you'll have to add the following css in order to have the exact same result

.input-group .form-control {
  height: 40px;
  border: none;
  border-radius: 20px;
}
<div class="input-group m400">
   <input class="form-control" type="email" name="email" placeholder="Email" required="">
   <span class="input-group-btn">
   <button class="btn btn-static-tertiary cta-inputgroup-button" type="submit">Get Started<i class="icon-arrow-right m-l-small"></i></button></span>
</div>

Alerts

Some alerts used mainly for the documentation of Algolia.

The code for them hasn't been added yet to the main css codebase, you can find the css for each of them Here.

.alert.alert-info

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

.alert.alert-warning

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

.alert.alert-danger

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Search bar

The helper allows you to create search inputs with a few classes

<div class="m100p pos-rel">
  <i class="icon icon-search pos-abt v-center m-l-large text-lg color-logan"></i>
  <input class="h80 w100p fill-white radius6 block elevation1 b-n p-l-xxlarge" placeholder="Search something.. "></input>
</div>

Icons

The icons are not part of the algolia-aerial npm package. To use them, you have to download the files from the algolia-fonts github project

To display the icons, use the following classes:

1 - Website icon font

.icon-quote

.icon-play

.icon-blog

.icon-stories

.icon-add

.icon-algolia-mark

.icon-analytics

.icon-android

.icon-arrow-left

.icon-arrow-right

.icon-calendar

.icon-caret-down

.icon-caret-left

.icon-caret-right

.icon-caret-top

.icon-cart

.icon-check-circle

.icon-check

.icon-clear

.icon-clock

.icon-close

.icon-code

.icon-comment

.icon-copy

.icon-docs

.icon-download

.icon-dribbble

.icon-email

.icon-facebook

.icon-facet

.icon-fav

.icon-file

.icon-filters

.icon-geo-unknow

.icon-geoloc

.icon-github

.icon-heart

.icon-heroku

.icon-highlight

.icon-home

.icon-hot

.icon-index

.icon-infinite

.icon-medium

.icon-ios

.icon-jsfiddle

.icon-link

.icon-linkedin

.icon-lock

.icon-logout

.icon-magento

.icon-instagram

.icon-menu

.icon-more

.icon-move

.icon-offline

.icon-opensource

.icon-pdf

.icon-quotes

.icon-ranking

.icon-refresh

.icon-scissors

.icon-search

.icon-select

.icon-support

.icon-sync

.icon-transition

.icon-twitter

.icon-typo

.icon-wordpress

.icon-youtube

.icon-zap

.icon-zendesk

2 - Brands icon font

.brands-vouchercodes

.brands-algolia

.brands-idealist

.brands-jbhifi

.brands-mailjet

.brands-balinea

.brands-streema

.brands-evolution7

.brands-alltrails

.brands-quicksilver

.brands-stripe

.brands-underarmour

.brands-strava

.brands-abascus

.brands-calvin-klein

.brands-the-kooples

.brands-teespring

.brands-play

.brands-8tracks

.brands-aftership

.brands-alittlemarket

.brands-arcteryx

.brands-birchbox

.brands-blablacar

.brands-craftsy

.brands-crunchbase

.brands-digitalocean

.brands-fanatics

.brands-genius

.brands-jadopado

.brands-livestream

.brands-lvmh

.brands-mairie-de-paris

.brands-medium

.brands-meta

.brands-mysale

.brands-periscope

.brands-producthunt

.brands-twitch

.brands-vevo