Attributes
Color
Important color
Other colors
Grey colors
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
Block headline h4
.ric-typo__headline--block
is 14px 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
Icons
We simply use material icons but we also have extra icons:
- Reference from material icon person
.ric-icon__tag-outline
To avoid displaying icon name before icon is loaded please use font-spy
Logos
If you want to refer directly to the file you can use the CDN URL, e.g. https://style-6a38.kxcdn.com/3.0.2/lib/images/ric-logo__core.svg
<div class="ric-logo__core"></div>
<div class="ric-logo__core--responsive"></div>
<div class="ric-logo__core--small"></div>
<div class="ric-logo__auto"></div>
<div class="ric-logo__auto--responsive"></div>
<div class="ric-logo__auto--small"></div>
<div class="ric-logo__moto"></div>
<div class="ric-logo__moto--responsive"></div>
<div class="ric-logo__moto--small"></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/3.0.2/lib/images/apple-touch-icon-180x180-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="https://style-6a38.kxcdn.com/3.0.2/lib/images/apple-touch-icon-152x152-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="https://style-6a38.kxcdn.com/3.0.2/lib/images/apple-touch-icon-120x120-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="https://style-6a38.kxcdn.com/3.0.2/lib/images/apple-touch-icon-precomposed.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://style-6a38.kxcdn.com/3.0.2/lib/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://style-6a38.kxcdn.com/3.0.2/lib/images/favicon-16x16.png">
<link rel="manifest" href="https://style-6a38.kxcdn.com/3.0.2/lib/images/manifest.json">
<link rel="mask-icon" color="#5bbad5" href="https://style-6a38.kxcdn.com/3.0.2/lib/images/safari-pinned-tab.svg">
Auto/Moto
<link rel="apple-touch-icon" sizes="57x57" href="https://style-6a38.kxcdn.com/3.0.2/lib/images/auto_apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="https://style-6a38.kxcdn.com/3.0.2/lib/images/auto_apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="https://style-6a38.kxcdn.com/3.0.2/lib/images/auto_apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://style-6a38.kxcdn.com/3.0.2/lib/images/auto_apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://style-6a38.kxcdn.com/3.0.2/lib/images/auto_apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://style-6a38.kxcdn.com/3.0.2/lib/images/auto_apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://style-6a38.kxcdn.com/3.0.2/lib/images/auto_apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://style-6a38.kxcdn.com/3.0.2/lib/images/auto_apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://style-6a38.kxcdn.com/3.0.2/lib/images/auto_apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://style-6a38.kxcdn.com/3.0.2/lib/images/auto_android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://style-6a38.kxcdn.com/3.0.2/lib/images/auto_favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://style-6a38.kxcdn.com/3.0.2/lib/images/auto_favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://style-6a38.kxcdn.com/3.0.2/lib/images/auto_favicon-16x16.png">
<link rel="manifest" href="https://style-6a38.kxcdn.com/3.0.2/lib/images/auto_manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="https://style-6a38.kxcdn.com/3.0.2/lib/images/auto_ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">