close
ricardo.ch wird neu. Auch diese Seite gehört dazu. Mehr erzählen wir dir hier: ricardo stories
ricardo styleguide v.9.0.3

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

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

Ricardo Icons

  • .ric-icon__category__antiques-art
  • .ric-icon__category__audio-tv-video
  • .ric-icon__category__auto
  • .ric-icon__category__motorcycle
  • .ric-icon__category__stamps
  • .ric-icon__category__books-comics
  • .ric-icon__category__office-commercial
  • .ric-icon__category__computer-network
  • .ric-icon__category__movie-dvd
  • .ric-icon__category__foto-optics
  • .ric-icon__category__games-consoles
  • .ric-icon__category__craft-garden
  • .ric-icon__category__mobile-landline-radio
  • .ric-icon__category__household-living
  • .ric-icon__category__child-baby
  • .ric-icon__category__clothes-accessories
  • .ric-icon__category__cosmetics-care
  • .ric-icon__category__modelmaking-hobby
  • .ric-icon__category__coints
  • .ric-icon__category__mustik-instruments
  • .ric-icon__category__collting-rarities
  • .ric-icon__category__toys-tinkering
  • .ric-icon__category__sport
  • .ric-icon__category__tickets-coupons
  • .ric-icon__category__animal-supplies
  • .ric-icon__category__clocks-jewellery
  • .ric-icon__category__wine-pleasure

Logos

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


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

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

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

<div class="ric-logo__core ric-logo__core--smaller"></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 ric-logo__auto--smaller"></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 ric-logo__moto--smaller"></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/9.0.3/lib/images/apple-touch-icon-180x180-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="https://style-6a38.kxcdn.com/9.0.3/lib/images/apple-touch-icon-152x152-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="https://style-6a38.kxcdn.com/9.0.3/lib/images/apple-touch-icon-120x120-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="https://style-6a38.kxcdn.com/9.0.3/lib/images/apple-touch-icon-precomposed.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://style-6a38.kxcdn.com/9.0.3/lib/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://style-6a38.kxcdn.com/9.0.3/lib/images/favicon-16x16.png">
<link rel="manifest" href="https://style-6a38.kxcdn.com/9.0.3/lib/images/manifest.json">
<link rel="mask-icon" color="#5bbad5" href="https://style-6a38.kxcdn.com/9.0.3/lib/images/safari-pinned-tab.svg">

Auto/Moto

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