Airship Elements

Using Airship elements in the application

Isthmus uses components from Airship directly in several different areas and you can use any of those components in your app as well by including this import in the component:

import '@carto/airship-style';

Some examples of this are in the BottomBar component:

<div className="as-container as-container--scrollable">
  <section className="as-box as-box--large">
    <Formula
      title='Total Damage'
      description='Maximum total damage in USD for accidents in view'
      round={false}
      currency={true}
      locale='es-ES'
      currencyType='EUR'
      layer={this.props.layers.railaccidents.source}
      column='total_damage'
      operation={carto.operation.MAX}
    />
  </section>
</div>

We use <div className="as-container as-container--scrollable"> and <section className="as-box as-box--large"> to wrap the Formula widget. You can learn more about this, specific to the Footer Airship layout here.

There are many other ways to leverage the Airship styles within your application so please make sure to review the Airship documentation in detail to further customize your app.

Last updated