Skip to content
Calcite Web is deprecated.

This project is no longer maintained and is not recommended for future development. Visit the Calcite Web GitHub repository for more information.

Type

Avenir
  • .avenir-light
  • .avenir-regular
  • .avenir-italic
  • .avenir-demi
  • .avenir-bold
Code Face
  • .code-face
Text modifiers
  • .text-light
  • .text-ellipsis
  • .text-rule
  • .text-inline
  • .text-center
  • .text-left
  • .text-right
Sizes
  • .font-size--3
  • .font-size--2
  • .font-size--1
  • .font-size-0
  • .font-size-1
  • .font-size-2
  • .font-size-3
  • .font-size-4
  • .font-size-5
  • .font-size-6
  • .font-size-7
  • .font-size-8
Color
  • .text-red
  • .text-green
  • .text-blue
  • .text-white
  • .text-light-gray
  • .text-dark-gray
  • .text-darker-gray
  • .text-darkest-gray
  • .text-off-black
  • .link-red
  • .link-green
  • .link-blue
  • .link-light-blue
  • .link-dark-blue
  • .link-white
  • .link-light-gray
  • .link-dark-gray
  • .link-darker-gray
  • .link-darkest-gray
  • .link-off-black
Numbered List
  • .list-numbered
Plain List
  • .list-plain

Grid

Container
  • .grid-container
Columns
  • .column-n
Responsive Columns
  • .tablet-column-n
  • .phone-column-n
Block Groups
  • .block-group
  • .block-group-n-up
  • .block
Responsive Block Groups
  • .tablet-block-group-n-up
  • .phone-block-group-n-up
Pre & Post
  • .pre-n
  • .post-n
Leader & Trailer
  • .leader-0
  • .leader-quarter
  • .leader-half
  • .leader-1
  • .leader-2
  • .leader-3
  • .leader-4
  • .leader-5
  • .leader-6
  • .trailer-0
  • .trailer-quarter
  • .trailer-half
  • .trailer-1
  • .trailer-2
  • .trailer-3
  • .trailer-4
  • .trailer-5
  • .trailer-6
  • .padding-leader-0
  • .padding-leader-quarter
  • .padding-leader-half
  • .padding-leader-1
  • .padding-leader-2
  • .padding-leader-3
  • .padding-leader-4
  • .padding-leader-5
  • .padding-leader-6
  • .padding-trailer-0
  • .padding-trailer-quarter
  • .padding-trailer-half
  • .padding-trailer-1
  • .padding-trailer-2
  • .padding-trailer-3
  • .padding-trailer-4
  • .padding-trailer-5
  • .padding-trailer-6
Horizontal Spacing
  • .padding-left-quarter
  • .padding-right-quarter
  • .padding-left-third
  • .padding-right-third
  • .padding-left-half
  • .padding-right-half
  • .padding-left-1
  • .padding-left-2
  • .padding-left-3
  • .padding-left-4
  • .padding-right-1
  • .padding-right-2
  • .padding-right-3
  • .padding-right-4
  • .margin-left-quarter
  • .margin-right-quarter
  • .margin-left-third
  • .margin-right-third
  • .margin-left-half
  • .margin-right-half
  • .margin-left-1
  • .margin-left-2
  • .margin-left-3
  • .margin-left-4
  • .margin-right-1
  • .margin-right-2
  • .margin-right-3
  • .margin-right-4
First & Last
  • .first-column
  • .tablet-first-column
  • .phone-first-column
  • .last-column
  • .tablet-last-column
  • .phone-last-column
Show & Hide
  • .tablet-show
  • .tablet-hide
  • .phone-show
  • .phone-hide
  • .visually-hidden
  • .visually-hidden-focusable
Left & Right
  • .left
  • .right
Inline Block
  • .inline-block
Scroll Show & Hide
  • .scroll-show
Scroll Sticky
  • .js-sticky

Icons

User Interface Icons
  • .icon-ui-add-attachment
  • .icon-ui-announcement
  • .icon-ui-applications
  • .icon-ui-arrow-down-circled
  • .icon-ui-arrow-left-circled
  • .icon-ui-arrow-right-circled
  • .icon-ui-arrow-up-circled
  • .icon-ui-attachment
  • .icon-ui-authorize
  • .icon-ui-basemap
  • .icon-ui-beginning
  • .icon-ui-blank-map-pin
  • .icon-ui-browser
  • .icon-ui-calculator
  • .icon-ui-calendar
  • .icon-ui-chart
  • .icon-ui-chat
  • .icon-ui-check-mark
  • .icon-ui-checkbox-checked
  • .icon-ui-checkbox-unchecked
  • .icon-ui-close-circled
  • .icon-ui-close
  • .icon-ui-collapse
  • .icon-ui-collection
  • .icon-ui-comment
  • .icon-ui-compass
  • .icon-ui-configure-popup
  • .icon-ui-contact
  • .icon-ui-dashboard
  • .icon-ui-deny
  • .icon-ui-description
  • .icon-ui-directions
  • .icon-ui-directions2
  • .icon-ui-dock-bottom
  • .icon-ui-dock-left
  • .icon-ui-dock-right
  • .icon-ui-documentation
  • .icon-ui-down-arrow-circled
  • .icon-ui-down-arrow
  • .icon-ui-down
  • .icon-ui-download
  • .icon-ui-drag-horizontal
  • .icon-ui-drag-vertical
  • .icon-ui-duplicate
  • .icon-ui-edit
  • .icon-ui-end
  • .icon-ui-environment-settings
  • .icon-ui-erase
  • .icon-ui-error
  • .icon-ui-error2
  • .icon-ui-expand
  • .icon-ui-experimental
  • .icon-ui-favorites
  • .icon-ui-feature-layer
  • .icon-ui-filter
  • .icon-ui-forward
  • .icon-ui-globe
  • .icon-ui-grant
  • .icon-ui-grid
  • .icon-ui-group
  • .icon-ui-handle-horizontal
  • .icon-ui-handle-vertical
  • .icon-ui-home
  • .icon-ui-key
  • .icon-ui-labels
  • .icon-ui-layer-list
  • .icon-ui-layers
  • .icon-ui-left-arrow-circled
  • .icon-ui-left-arrow
  • .icon-ui-left-triangle-arrow
  • .icon-ui-left
  • .icon-ui-line-chart
  • .icon-ui-link-external
  • .icon-ui-link
  • .icon-ui-loading-indicator
  • .icon-ui-locate
  • .icon-ui-locked
  • .icon-ui-map-pin
  • .icon-ui-maps
  • .icon-ui-marketplace
  • .icon-ui-maximize
  • .icon-ui-media
  • .icon-ui-media2
  • .icon-ui-menu
  • .icon-ui-minimize
  • .icon-ui-minus-circled
  • .icon-ui-minus
  • .icon-ui-mobile
  • .icon-ui-navigation
  • .icon-ui-notice-round
  • .icon-ui-notice-triangle
  • .icon-ui-organization
  • .icon-ui-overview-arrow-bottom-left
  • .icon-ui-overview-arrow-bottom-right
  • .icon-ui-overview-arrow-top-left
  • .icon-ui-overview-arrow-top-right
  • .icon-ui-pan
  • .icon-ui-pause
  • .icon-ui-phone
  • .icon-ui-pie-chart
  • .icon-ui-play
  • .icon-ui-plus-circled
  • .icon-ui-plus
  • .icon-ui-printer
  • .icon-ui-question
  • .icon-ui-radio-checked
  • .icon-ui-radio-unchecked
  • .icon-ui-refresh
  • .icon-ui-resend-invitation
  • .icon-ui-reverse
  • .icon-ui-review
  • .icon-ui-right-arrow-circled
  • .icon-ui-right-arrow
  • .icon-ui-right-triangle-arrow
  • .icon-ui-right
  • .icon-ui-rotate
  • .icon-ui-save
  • .icon-ui-search
  • .icon-ui-settings
  • .icon-ui-settings2
  • .icon-ui-share
  • .icon-ui-sign-out
  • .icon-ui-sort-ascending
  • .icon-ui-sort-descending
  • .icon-ui-support
  • .icon-ui-table
  • .icon-ui-tag
  • .icon-ui-time-clock
  • .icon-ui-trash
  • .icon-ui-unlocked
  • .icon-ui-up-arrow-circled
  • .icon-ui-up-arrow
  • .icon-ui-up-down-arrows
  • .icon-ui-up
  • .icon-ui-upload
  • .icon-ui-user
  • .icon-ui-zoom-in-fixed
  • .icon-ui-zoom-in-magnifying-glass
  • .icon-ui-zoom-out-fixed
  • .icon-ui-zoom-out-magnifying-glass
Social Icons
  • .icon-social-contact
  • .icon-social-facebook
  • .icon-social-geonet
  • .icon-social-github
  • .icon-social-google-plus
  • .icon-social-instagram
  • .icon-social-linkedin
  • .icon-social-pinterest
  • .icon-social-rss
  • .icon-social-share
  • .icon-social-twitter
  • .icon-social-youtube

Components

Buttons
  • .btn
  • .btn-transparent
  • .btn-clear
  • .btn-clear-white
  • .btn-small
  • .btn-large
  • .btn-fill
  • .btn-half
  • .btn-disabled
  • .btn-white
  • .btn-red
  • .btn-green
Button Groups
  • .btn-grouped
Labels
  • .label
  • .label-blue
  • .label-green
  • .label-yellow
  • .label-red
  • .dropdown
  • .dropdown-right
Loader
  • .loader
Alerts
  • .alert
  • .alert-red
  • .alert-yellow
  • .alert-green
  • .alert-full
Panels
  • .panel
  • .panel-no-border
  • .panel-no-padding
  • .panel-dark
  • .panel-black
  • .panel-white
  • .panel-light-blue
  • .panel-blue
  • .panel-dark-blue
Cards
  • .card
  • .card-shaped
  • .card-bar-color
Wide Cards
  • .card-wide
  • .breadcrumbs
  • .crumb
  • .breadcrumbs-white
Tooltips
  • .tooltip
  • .tooltip-multiline
  • .tooltip-left
  • .tooltip-right
  • .tooltip-top
Tables
  • .overflow-auto
  • .table-blue
  • .table-striped
  • .table-plain
  • .table-striped table-blue
  • .table-no-table
Skip to Content
  • .skip-to-content
Text Inputs
  • .input-success
  • .input-error
  • .input-search
  • .input-search input-minimal
Input Groups
  • .input-group
  • .input-group-input
  • .input-group-button
Selects
  • .select-full
Switches
  • .toggle-switch
  • .toggle-switch-destructive
Checkboxes
  • .fieldset-checkbox
Radio Buttons
  • .fieldset-radio
Radio Group
  • .radio-group
Overview
  • .animate-fade-in
  • .animate-fade-out
  • .animate-in-down
  • .animate-in-up
  • .animate-out-down
  • .animate-out-up
  • .esri-logo
  • .esri-logo-reverse
  • .esri-logo-condensed