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 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

Default text p

.ric-typo__body is 14px 400

Icons

add Add
remove Remove
arrow_back Back
arrow_drop_up Drop up
arrow_drop_down Drop down
check Check
clear Close
settings Settings
visibility Visibility
visibility_off Visibility off
history History
info_outline Info
lock_outline Lock
undo Undo
redo Redo
person User
menu Menu
help_outline Help
search Search
delete Delete
error_outline Error
priority_high Warning
keyboard_arrow_down Arrow down
keyboard_arrow_up Arrow up
keyboard_arrow_left Arrow left
keyboard_arrow_right Arrow right

Logos

If you want to refer directly to the file you can use the CDN URL, e.g. https://style-6a38.kxcdn.com/1.4.7/lib/images/Logo_ricardo_Standalone_2x.png


<div class="ric-new-logo-responsive--auto"></div>

<div class="ric-new-auto-logo-standalone"></div>

<div class="ric-new-logo-responsive"></div>

<div class="ric-new-logo-standalone"></div>

<div class="ric-logo-responsive--auto"></div>

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

<div class="ric-logo-icon-1x"></div>

<div class="ric-logo-standalone-1x"></div>

<div class="ric-logo-slogan-german-1x"></div>

<div class="ric-logo-slogan-french-1x"></div>

<div class="ric-logo-icon-2x"></div>

<div class="ric-logo-standalone-2x"></div>

<div class="ric-logo-slogan-german-2x"></div>

<div class="ric-logo-slogan-french-2x"></div>

Favicons

Here the HTML block we use for the favicons:

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