menu

Attributes

Color

Important color

#0096D8
.ric-color__main--background
.ric-color__main--text
.ric-color__main--border
#0F84BA
.ric-color__main--hover--background
.ric-color__main--hover--text
.ric-color__main--hover--border
#0A72A1
.ric-color__main--active--background
.ric-color__main--active--text
.ric-color__main--active--border
#ef7310
.ric-color__brand--background
.ric-color__brand--text
.ric-color__brand--border
#de6c10
.ric-color__brand--hover--background
.ric-color__brand--hover--text
.ric-color__brand--hover--border
#cf650e
.ric-color__brand--active--background
.ric-color__brand--active--text
.ric-color__brand--active--border

Other colors

#156ea0
.ric-color__dark-blue--background
.ric-color__dark-blue--text
.ric-color__dark-blue--border
#0F84BA
.ric-color__dark-blue--hover--background
.ric-color__dark-blue--hover--text
.ric-color__dark-blue--hover--border
#0A72A1
.ric-color__dark-blue--active--background
.ric-color__dark-blue--active--text
.ric-color__dark-blue--active--border
#3DB200
.ric-color__green--background
.ric-color__green--text
.ric-color__green--border
#84ab11
.ric-color__green--hover--background
.ric-color__green--hover--text
.ric-color__green--hover--border
#7b9e10
.ric-color__green--active--background
.ric-color__green--active--text
.ric-color__green--active--border
#edb400
.ric-color__yellow--background
.ric-color__yellow--text
.ric-color__yellow--border
#deaa00
.ric-color__yellow--hover--background
.ric-color__yellow--hover--text
.ric-color__yellow--hover--border
#c99a00
.ric-color__yellow--active--background
.ric-color__yellow--active--text
.ric-color__yellow--active--border
#d84021
.ric-color__red--background
.ric-color__red--text
.ric-color__red--border
#c93b1e
.ric-color__red--hover--background
.ric-color__red--hover--text
.ric-color__red--hover--border
#bd371c
.ric-color__red--active--background
.ric-color__red--active--text
.ric-color__red--active--border
#f5f5f0
.ric-color__warm-grey--background
.ric-color__warm-grey--text
.ric-color__warm-grey--border

Grey colors

Aa
.rgba(0, 0, 0, .87)
.ric-color__grey-87--text
.ric-color__grey-87--background
.ric-color__grey-87--border
Aa
.rgba(0, 0, 0, .54)
.ric-color__grey-54--text
.ric-color__grey-54--background
.ric-color__grey-54--border
Aa
.rgba(0, 0, 0, .38)
.ric-color__grey-38--text
.ric-color__grey-38--background
.ric-color__grey-38--border
Aa
.rgba(0, 0, 0, .15)
.ric-color__grey-15--text
.ric-color__grey-15--background
.ric-color__grey-15--border
Aa
.rgba(0, 0, 0, .12)
.ric-color__grey-12--text
.ric-color__grey-12--background
.ric-color__grey-12--border
Aa
.rgba(0, 0, 0, .06)
.ric-color__grey-6--text
.ric-color__grey-6--background
.ric-color__grey-6--border

Typography

Font family

font-family: Roboto, Helvetica, Arial, sans-serif;
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500' rel='stylesheet' type='text/css'>

Font weights

Light 300 .mdl-typography--font-light

Regular 400 .mdl-typography--font-regular

Medium 500 .mdl-typography--font-medium or <strong></strong>

Font sizes

You can simply use the natural semantic tags that come with special margins or use the specific CSS classes.

Big title h1

.ric-typo__big-title is 64px 300

Main title h1

.ric-typo__main-title is 34px 400

Subtitle h2

.ric-typo__subtitle is 24px 400

Headline h3

.ric-typo__headline is 20px 500

Highlight p

.ric-typo__highlight is 18px 400

Paragraph headline p

.ric-typo__paragraph-headline is 16px 400

Default text p

.ric-typo__body is 14px 400

Logos

If you want to refer directly to the file you can use the CDN URL, e.g. https://style-6a38.kxcdn.com/1.6.7/lib/images/ric-logo__core.svg


<div class="ric-logo__core"></div>

<div class="ric-logo__core--responsive"></div>

<div class="ric-logo__auto"></div>

<div class="ric-logo__auto--responsive"></div>

<div class="ric-logo__moto"></div>

<div class="ric-logo__moto--responsive"></div>

Favicons

Here the HTML block we use for the favicons:

Marketplace

<link rel="apple-touch-icon-precomposed" sizes="180x180" href="https://style-6a38.kxcdn.com/1.6.7/lib/images/apple-touch-icon-180x180-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="https://style-6a38.kxcdn.com/1.6.7/lib/images/apple-touch-icon-152x152-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="https://style-6a38.kxcdn.com/1.6.7/lib/images/apple-touch-icon-120x120-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="https://style-6a38.kxcdn.com/1.6.7/lib/images/apple-touch-icon-precomposed.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://style-6a38.kxcdn.com/1.6.7/lib/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://style-6a38.kxcdn.com/1.6.7/lib/images/favicon-16x16.png">
<link rel="manifest" href="https://style-6a38.kxcdn.com/1.6.7/lib/images/manifest.json">
<link rel="mask-icon" color="#5bbad5" href="https://style-6a38.kxcdn.com/1.6.7/lib/images/safari-pinned-tab.svg">

Auto/Moto

  <link rel="apple-touch-icon" sizes="57x57" href="https://style-6a38.kxcdn.com/1.6.7/lib/images/auto_apple-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="60x60" href="https://style-6a38.kxcdn.com/1.6.7/lib/images/auto_apple-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href="https://style-6a38.kxcdn.com/1.6.7/lib/images/auto_apple-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="76x76" href="https://style-6a38.kxcdn.com/1.6.7/lib/images/auto_apple-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="114x114" href="https://style-6a38.kxcdn.com/1.6.7/lib/images/auto_apple-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="120x120" href="https://style-6a38.kxcdn.com/1.6.7/lib/images/auto_apple-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="144x144" href="https://style-6a38.kxcdn.com/1.6.7/lib/images/auto_apple-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="152x152" href="https://style-6a38.kxcdn.com/1.6.7/lib/images/auto_apple-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="https://style-6a38.kxcdn.com/1.6.7/lib/images/auto_apple-icon-180x180.png">
  <link rel="icon" type="image/png" sizes="192x192"  href="https://style-6a38.kxcdn.com/1.6.7/lib/images/auto_android-icon-192x192.png">
  <link rel="icon" type="image/png" sizes="32x32" href="https://style-6a38.kxcdn.com/1.6.7/lib/images/auto_favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="https://style-6a38.kxcdn.com/1.6.7/lib/images/auto_favicon-96x96.png">
  <link rel="icon" type="image/png" sizes="16x16" href="https://style-6a38.kxcdn.com/1.6.7/lib/images/auto_favicon-16x16.png">
  <link rel="manifest" href="https://style-6a38.kxcdn.com/1.6.7/lib/images/auto_manifest.json">
  <meta name="msapplication-TileColor" content="#ffffff">
  <meta name="msapplication-TileImage" content="https://style-6a38.kxcdn.com/1.6.7/lib/images/auto_ms-icon-144x144.png">
  <meta name="theme-color" content="#ffffff">