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

Components

Form


    <form action="">
    	<div>
    		<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    			<input class="mdl-textfield__input" type="text" id="sample3">
    			<label class="mdl-textfield__label" for="sample3">my text</label>
    		</div>
    	</div>
    	<button class="ric-button--primary mdl-js-button mdl-js-ripple-effect">Submit</button>
    </form>

Dialog

This dialog offers good behavior on Chrome mobile as it is implementing a native API. A polyfill is provided for browser that don't support it.

Hey what's up?

The style guide is amazing but would you describe it?


    <button id="show-dialog" class="ric-button--flat mdl-js-button mdl-js-ripple-effect">Show Dialog</button>
    <dialog class="mdl-dialog">
    	<h4 class="mdl-dialog__title">Hey what's up?</h4>
    	<div class="mdl-dialog__content">
    		<p>
    			The style guide is amazing but would you describe it?
    		</p>
    	</div>
    	<div class="mdl-dialog__actions">
    		<button class="ric-button--primary mdl-js-button mdl-js-ripple-effect close">Awesome</button>
    	</div>
    </dialog>
    <script>
    	document.addEventListener("DOMContentLoaded", function(event) {
    		var dialog = document.querySelector('dialog');
    		var showDialogButton = document.querySelector('#show-dialog');
    		if (!dialog.showModal) {
    			dialogPolyfill.registerDialog(dialog);
    		}
    		showDialogButton.addEventListener('click', function() {
    			dialog.showModal();
    		});
    		dialog.querySelector('.close').addEventListener('click', function() {
    			dialog.close();
    		});
    	});
    </script>

Header

The content of this header is just an example. Please add classes if necessary.


    <header class="ric-header">
    	<div class="ric-header__container">
    		<div class="ric-header__left-container">
    			<a href="#" class="ric-logo ric-logo__core ric-logo__core--responsive ric-logo__core--smaller"></a>
    			<a href="#" class="ric-logo ric-logo__auto ric-logo__auto--responsive ric-logo__auto--smaller ric-logo__auto--disabled"></a>
    		</div>
    		<div class="ric-header__right-container">
    			<a href="https://www.ricardo.ch/verkaufen/verkaufsformular/schritt1" class="ric-header__quick-links">
            <span class="ric-layout__phone--hide">Verkaufen</span>
            <div class="ric-icon__tag-outline"></div>
          </a>
    			<a href="https://www.ricardo.ch/merkliste/" class="ric-header__quick-links">
            <span class="ric-layout__phone--hide">Merkliste</span>
            <i class="material-icons">bookmark_border</i>
          </a>
    			<span id="user-menu" class="ric-user-menu ric-header__quick-links ric-header__quick-links--last">
            <span class="ric-layout__phone--hide">Marius Rickenbacher</span>
    			<i class="material-icons">person_outline</i>
    			<i class="ric-header__user-drop-down material-icons">arrow_drop_down</i>
    			</span>
    			<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect ric-drop-down" for="user-menu">
    				<a class="mdl-menu__item mdl-js-ripple-effect" href="#" tabindex="-1">
              My Ricardo<i class="material-icons">person_outline</i>
            </a>
    				<a class="mdl-menu__item mdl-js-ripple-effect" href="#" tabindex="-1">
              Mein Kaufen<i class="material-icons">shopping_cart</i>
            </a>
    				<a class="mdl-menu__item mdl-js-ripple-effect" href="#" tabindex="-1">
              Mein Verkaufen<i class="material-icons">store</i>
            </a>
    				<a class="mdl-menu__item log-out mdl-js-ripple-effect" href="#" tabindex="-1">
              Abmelden<i class="material-icons">exit_to_app</i>
            </a>
    			</ul>
    			<a class="ric-layout__phone--hide ric-header__quick-links ric-header__quick-links--last" href="#">FR</a>
    		</div>
    	</div>
    </header>

Notices

Example of basic message to the user

This is a success message

This is a warning message

This is an error message

This is a success message

Let's put some content in there to see how it behaves


    <p class="ric-notice--success">
    	This is a <strong>success</strong> message
    </p>
    
    <p class="ric-notice--warning">
    	This is a <strong>warning</strong> message
    </p>
    
    <p class="ric-notice--error">
    	This is an <strong>error</strong> message
    </p>
    
    
    
    <div class="ric-notice--success">
    	<h2>This is a <strong>success</strong> message</h2>
    
    	<p>Let's put some <a href="#">content in there to see how it behaves</a></p>
    </div>

Feedback

Trigger for the feedback form.


    <div class="ric-feedback">
    	<a href="#" class="ric-feedback__container">
    		<div class="ric-feedback__image"></div>
    		<div class="ric-feedback__text">
    			<div>Your opinion matters.</div>
    			<span class="ric-feedback__link">It really does.</span>
    		</div>
    	</a>
    </div>

Tabs

First

Second

Third


    <div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
    
    	<div class="mdl-tabs__tab-bar">
    		<a href="#tabs-panel-one" class="mdl-tabs__tab is-active">First<small class="ric-layout__phone--hide ric-layout__content-margin--small">(123456)</small></a>
    		<a href="#tabs-panel-two" class="mdl-tabs__tab">Second</a>
    		<a href="#tabs-panel-three" class="mdl-tabs__tab">Third</a>
    		<span class="mdl-tabs__tab is-disabled">Disabled</span>
    	</div>
    
    	<div class="mdl-tabs__panel is-active" id="tabs-panel-one">
    		<h3>First</h3>
    	</div>
    
    	<div class="mdl-tabs__panel" id="tabs-panel-two">
    		<h3>Second</h3>
    	</div>
    
    	<div class="mdl-tabs__panel" id="tabs-panel-three">
    		<h3>Third</h3>
    	</div>
    </div>

Notification Bar

close Some title the message some link
Some other important stufff message some link
Some content
Some content
Some content
Some content
Some content

    <div class="ric-notification-bar">
    	<a href="#" class="ric-notification-bar__close">
        <i class="material-icons">close</i>
      </a>
    	<strong>Some title</strong> the message <a href="#">some link</a><br>
    	<strong>Some other important stufff</strong> message <a href="#">some link</a>
    	<br>Some content
    	<br>Some content
    	<br>Some content
    	<br>Some content
    	<br>Some content
    </div>
    
    <script>
    	ric(document.body).delegate('click', '.ric-notification-bar__close', function(e) {
    		e.preventDefault()
    		ric(e.delegationTarget).closest('.ric-notification-bar').addClass('ric-notification-bar--hidden')
    	})
    </script>

Drop Down

Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum


    <div style="position:relative">
    	<button id="demo-menu-lower-left" class="mdl-button mdl-js-button mdl-button--icon">
        <i class="material-icons">more_vert</i>
      </button>
    
    	<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect ric-drop-down" for="demo-menu-lower-left">
    		<a href="#1" class="mdl-menu__item">My profile <i class="material-icons">person</i></a>
    		<a href="#2" class="mdl-menu__item">Mein Kaufen <i class="material-icons">shopping_cart</i></a>
    		<a href="#3" class="mdl-menu__item">Mein verkaufen <i class="material-icons">store</i></a>
    		<a href="#4" class="mdl-menu__item">Log out <i class="material-icons">exit_to_app</i></a>
    	</ul>
    </div>
    
    <div style="position:relative">
    	<button id="demo-menu-lower-right" style="float:right" class="mdl-button mdl-js-button mdl-button--icon">
        <i class="material-icons">more_vert</i>
      </button>
    
    	<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect ric-drop-down" for="demo-menu-lower-right">
    		<a href="#1" class="mdl-menu__item">My profile <i class="material-icons">person</i></a>
    		<a href="#2" class="mdl-menu__item">Mein Kaufen <i class="material-icons">shopping_cart</i></a>
    		<a href="#3" class="mdl-menu__item">Mein verkaufen <i class="material-icons">store</i></a>
    		<a href="#4" class="mdl-menu__item">Log out <i class="material-icons">exit_to_app</i></a>
    	</ul>
    	<div>
    
    		<p>
    			Lorem ipsum<br> Lorem ipsum<br> Lorem ipsum<br> Lorem ipsum<br> Lorem ipsum<br> Lorem ipsum<br> Lorem ipsum<br> Lorem ipsum<br> Lorem ipsum<br> Lorem ipsum<br> Lorem ipsum<br> Lorem ipsum<br>
    		</p>

Article Gallery


    <div class="ric-article-gallery" data-ric-article-gallery>
    	<div class="ric-article-gallery__image-container mdl-shadow--2dp">
    		<div class="ric-article-gallery__swipe-indicator ric-article-gallery__swipe-indicator--left">
    			<i class="material-icons">&#xE314;</i>
    		</div>
    		<div class="ric-article-gallery__swipe-indicator ric-article-gallery__swipe-indicator--right">
    			<i class="material-icons">&#xE315;</i>
    		</div>
    		<div class="ric-article-gallery__image--previous">
    			<img>
    		</div>
    		<div class="ric-article-gallery__image--current">
    			<img>
    		</div>
    		<div class="ric-article-gallery__loader">
    			<div class="ric-article-gallery__spinner">
    				<div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
    			</div>
    		</div>
    		<div class="ric-article-gallery__indicator-container ric-layout__medium--hide">
    			<div class="ric-article-gallery__indicator-inner-container">
    				<div class="ric-article-gallery__indicator mdl-shadow--2dp"></div>
    			</div>
    		</div>
    	</div>
    	<div class="ric-article-gallery__thumbnail-container-wrapper ric-layout__phone--hide">
    		<button class="ric-article-gallery__controller">
          <i class="material-icons">&#xE314;</i>
        </button>
    		<div class="ric-article-gallery__thumbnail-container">
    			<!-- TODO: add config to the widget -->
    			<!-- TODO: keyboard control -->
    			<!-- TODO: ? 3rd url for zooming -->
    			<img class="ric-article-gallery__thumbnail mdl-shadow--2dp ric-color__main--border" src="./assets/images/article-gallery/ferrari-01.jpg" srcset="./assets/images/article-gallery/ferrari-01-2x.jpg 2x" data-ric-article-gallery-src-lg="./assets/images/article-gallery/ferrari-01-lg.jpg"
    			 data-ric-article-gallery-srcset-lg="./assets/images/article-gallery/ferrari-01-lg-2x.jpg 2x">
    			<img class="ric-article-gallery__thumbnail mdl-shadow--2dp ric-color__main--border" src="./assets/images/article-gallery/ferrari-02.jpg" srcset="./assets/images/article-gallery/ferrari-02-2x.jpg 2x" data-ric-article-gallery-src-lg="./assets/images/article-gallery/ferrari-02-lg.jpg"
    			 data-ric-article-gallery-srcset-lg="./assets/images/article-gallery/ferrari-02-lg-2x.jpg 2x">
    			<img class="ric-article-gallery__thumbnail mdl-shadow--2dp ric-color__main--border" src="./assets/images/article-gallery/ferrari-03.jpg" srcset="./assets/images/article-gallery/ferrari-03-2x.jpg 2x" data-ric-article-gallery-src-lg="./assets/images/article-gallery/ferrari-03-lg.jpg"
    			 data-ric-article-gallery-srcset-lg="./assets/images/article-gallery/ferrari-03-lg-2x.jpg 2x">
    			<img class="ric-article-gallery__thumbnail mdl-shadow--2dp ric-color__main--border" src="./assets/images/article-gallery/ferrari-04.jpg">
    			<img class="ric-article-gallery__thumbnail mdl-shadow--2dp ric-color__main--border" src="./assets/images/article-gallery/ferrari-05.jpg">
    			<img class="ric-article-gallery__thumbnail mdl-shadow--2dp ric-color__main--border" src="./assets/images/article-gallery/ferrari-06.jpg">
    		</div>
    		<button class="ric-article-gallery__controller ric-article-gallery__controller--right">
          <i class="material-icons">&#xE315;</i>
        </button>
    	</div>
    </div>

Scrolltop


    <button type="button" class="ric-scrolltop mdl-button mdl-js-button"><i class="material-icons">keyboard_arrow_up</i></button>

Pagination

First page active

Random page active


    <h3>First page active</h3>
    
    <!-- 
      spaces between items are handled by whitespaces
      to make it work make sure, you have similar whitespaces as in the styleguide
      in pug you can provoke a white space like this "| "
      the &nbsp; (non-breaking-space) are causing a bigger space between the arrow buttons and the numbers
    -->
    
    <div class="ric-pagination">
    	<a href="#14-pagination">
        <button class="ric-pagination__button ric-pagination__button--active mdl-js-button mdl-js-ripple-effect ric-color__grey-6--background">1</button>
      </a>
    	<a href="#14-pagination">
        <button class="ric-pagination__button mdl-js-button mdl-js-ripple-effect ric-layout__small--hide">2</button>
      </a>
    	<a href="#14-pagination">
        <button class="ric-pagination__button mdl-js-button mdl-js-ripple-effect ric-layout__small--hide">3</button>
      </a>
    	<a href="#14-pagination">
        <button class="ric-pagination__button mdl-js-button mdl-js-ripple-effect ric-layout__small--hide">4</button>
      </a>
    	<a href="#14-pagination">
        <button class="ric-pagination__button mdl-js-button mdl-js-ripple-effect ric-layout__small--hide">5</button>
      </a>
    	<a href="#14-pagination">
        <button class="ric-pagination__button mdl-js-button mdl-js-ripple-effect ric-layout__small--hide">6</button>
      </a>
    	<span class="ric-pagination__ellipsis">...</span>
    	<a href="#14-pagination">
        <button class="ric-pagination__button mdl-js-button mdl-js-ripple-effect">223</button>
      </a>&nbsp;
    	<a href="#14-pagination">
        <button class="ric-pagination__button ric-pagination__button--navigate mdl-js-button mdl-js-ripple-effect">
          <i class="material-icons ric-color__main--text">keyboard_arrow_right</i>
        </button>
      </a>
    </div>
    
    <h3>Random page active</h3>
    <div class="ric-pagination">
    	<a href="#14-pagination">
        <button class="ric-pagination__button ric-pagination__button--navigate mdl-js-button mdl-js-ripple-effect">
          <i class="material-icons ric-color__main--text">keyboard_arrow_left</i>
        </button>
      </a>&nbsp;
    	<a href="#14-pagination">
        <button class="ric-pagination__button mdl-js-button mdl-js-ripple-effect">1</button>
      </a>
    	<span class="ric-pagination__ellipsis">...</span>
    	<a href="#14-pagination">
        <button class="ric-pagination__button mdl-js-button mdl-js-ripple-effect ric-layout__small--hide">101</button>
      </a>
    	<a href="#14-pagination">
        <button class="ric-pagination__button mdl-js-button mdl-js-ripple-effect ric-layout__small--hide">102</button>
      </a>
    	<a href="#14-pagination">
        <button class="ric-pagination__button ric-pagination__button--active mdl-js-button mdl-js-ripple-effect ">103</button>
      </a>
    	<a href="#14-pagination">
        <button class="ric-pagination__button mdl-js-button mdl-js-ripple-effect ric-layout__small--hide">104</button>
      </a>
    	<a href="#14-pagination">
        <button class="ric-pagination__button mdl-js-button mdl-js-ripple-effect ric-layout__small--hide">105</button>
      </a>
    	<span class="ric-pagination__ellipsis">...</span>
    	<a href="#14-pagination">
        <button class="ric-pagination__button mdl-js-button mdl-js-ripple-effect">223</button>
      </a>&nbsp;
    	<a href="#14-pagination">
        <button class="ric-pagination__button ric-pagination__button--navigate mdl-js-button mdl-js-ripple-effect">
          <i class="material-icons ric-color__main--text">keyboard_arrow_right</i>
        </button>
      </a>
    
    	<h3>Random page active with disabled buttons</h3>
    	<div class="ric-pagination">
    		<a href="#14-pagination">
        <button class="ric-pagination__button ric-pagination__button--navigate mdl-js-button mdl-js-ripple-effect">
          <i class="material-icons ric-color__main--text">keyboard_arrow_left</i>
        </button>
      </a>&nbsp;
    		<a href="#14-pagination">
        <button class="ric-pagination__button mdl-js-button mdl-js-ripple-effect">1</button>
      </a>
    		<span class="ric-pagination__ellipsis">...</span>
    		<a href="#14-pagination">
        <button class="ric-pagination__button mdl-js-button mdl-js-ripple-effect ric-layout__small--hide">101</button>
      </a>
    		<a href="#14-pagination">
        <button class="ric-pagination__button mdl-js-button mdl-js-ripple-effect ric-layout__small--hide">102</button>
      </a>
    		<a href="#14-pagination">
        <button class="ric-pagination__button ric-pagination__button--active mdl-js-button mdl-js-ripple-effect ">103</button>
      </a>
    		<a href="#14-pagination" class="ric-pagination--disabled">
        <button class="ric-pagination__button mdl-js-button mdl-js-ripple-effect ric-layout__small--hide" disabled>104</button>
      </a>
    		<a href="#14-pagination" class="ric-pagination--disabled">
        <button class="ric-pagination__button mdl-js-button mdl-js-ripple-effect ric-layout__small--hide" disabled>105</button>
      </a>
    		<span class="ric-pagination__ellipsis">...</span>
    		<a href="#14-pagination" class="ric-pagination--disabled">
        <button class="ric-pagination__button mdl-js-button mdl-js-ripple-effect" disabled>223</button>
      </a>&nbsp;
    		<a href="#14-pagination" class="ric-pagination--disabled">
        <button class="ric-pagination__button ric-pagination__button--navigate mdl-js-button mdl-js-ripple-effect" disabled>
          <i class="material-icons ric-color__main--text">keyboard_arrow_right</i>
        </button>
      </a>
    	</div>

Popover

Welcome

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...

Welcome

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...

    <style>
    	.ric-styleguide__popover {
    		height: 400px;
    		padding-left: 200px;
    	}
    
    	@media (max-width: 700px) {
    		.ric-styleguide__popover {
    			padding-left: 450px;
    			height: 100px;
    		}
    	}
    
    	@media (max-width: 600px) {
    		.ric-styleguide__popover {
    			padding-left: 0;
    			height: 100px;
    		}
    	}
    </style>
    <script>
    	ric(function() {
    		var popoverNode = document.querySelector('.ric-styleguide__popover-1')
    		var closeButton = document.querySelector('.ric-styleguide__popover-1--close')
    		closeButton.addEventListener('click', function() {
    			popoverNode.ricPopover.hide()
    		})
    
    		var popoverNode2 = document.querySelector('.ric-styleguide__popover-2')
    		var closeButton2 = document.querySelector('.ric-styleguide__popover-2--close')
    		closeButton2.addEventListener('click', function() {
    			popoverNode2.ricPopover.hide()
    		})
    	})
    </script>
    <div class="ric-styleguide__popover">
    	<ric-popover class="ric-popover__container ric-styleguide__popover-1" data-popover-visible="true" data-popover-mode="toggle">
    		<button class="ric-button--primary mdl-js-button mdl-js-ripple-effect ric-popover__button">
          Toggle: visible by default
        </button>
    		<div class="ric-popover">
    			<div class="ric-popover__backdrop"></div>
    			<div class="demo-card-wide mdl-card mdl-shadow--2dp">
    				<div class="mdl-card__title">
    					<h2 class="mdl-card__title-text">Welcome</h2>
    				</div>
    				<div class="mdl-card__supporting-text">
    					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
    				</div>
    				<div class="mdl-card__actions mdl-card--border">
    					<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                Get Started
              </a>
    				</div>
    				<div class="mdl-card__menu">
    					<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect ric-styleguide__popover-1--close">
                <i class="material-icons">close</i>
              </button>
    				</div>
    			</div>
    		</div>
    	</ric-popover>
    	<ric-popover class="ric-popover__container ric-styleguide__popover-2" data-popover-mode="show">
    		<button class="ric-button--primary mdl-js-button mdl-js-ripple-effect ric-popover__button">
          Show only: hidden by default
        </button>
    		<div class="ric-popover">
    			<div class="demo-card-wide mdl-card mdl-shadow--2dp">
    				<div class="mdl-card__title">
    					<h2 class="mdl-card__title-text">Welcome</h2>
    				</div>
    				<div class="mdl-card__supporting-text">
    					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
    				</div>
    				<div class="mdl-card__menu">
    					<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect ric-styleguide__popover-2--close">
                <i class="material-icons">close</i>
              </button>
    				</div>
    			</div>
    		</div>
    	</ric-popover>
    </div>

Navigation Bar


    <nav class="ric-navigation-bar">
    	<div class="ric-navigation-bar__left-links">
    		<a class="ric-navigation-bar__link" href="#">Dashboard</a>
    		<a class="ric-navigation-bar__link is-active" href="#">Analytics</a>
    	</div>
    </nav>

Article Slider

Some text
1 Mercedes-Benz CLA Shooting Brake 250 sport 7GDCT 4Matic very very long title long long
24 gebots 4'444'44.45
Kaufen 4'444'44.45
Some text
1 Mercedes-Benz CLA Shooting Brake 250 sport 7GDCT 4Matic
Startgebot 4'444'44.45
Some text
1 Mercedes-Benz CLA Shooting Brake 250 sport 7GDCT 4Matic
Kaufen 4'444'44.45
Some text
1 Mercedes-Benz CLA Shooting Brake 250 sport 7GDCT 4Matic
Startgebot 4'444'44.45
Kaufen 4'444'44.45
Some text
1 Mercedes-Benz CLA Shooting Brake 250 sport 7GDCT 4Matic
Startgebot 4'444'44.45
Kaufen 4'444'44.45
Some text
1 Mercedes-Benz CLA Shooting Brake 250 sport 7GDCT 4Matic
Startgebot 4'444'44.45
Kaufen 4'444'44.45

    <!--
    The left and right fade and button need to be removed and added accordingly when
    reaching the start and end of the articles list
    This should be done in the application as the styleguide should not know anything about the article data
    to scroll use something like: document.querySelector('.ric-article-slider__inner').scrollLeft=700
    -->
    <style>
    	/* It's recommended to define min and max sizes example from marketplace: */
    
    	.ric-marketplace-article--max-size {
    		max-width: 265px;
    		max-height: 350px;
    	}
    
    	.ric-marketplace-article__image--min-size {
    		min-width: 265px;
    		min-height: 200px;
    		background: #aaa;
    	}
    </style>
    <div class="ric-article-slider ric-styleguide-demo-slider">
    	<div class="ric-article-slider__inner">
    		<div id="articles-view" class="ric-articles-slider-view">
    
    			<div class="ric-article">
    				<div class="ric-article__image">
    					<img src="./assets/images/lumia_240_1-1_1x.png" alt="Some text" />
    				</div>
    				<div class="ric-article__main-container">
    					<div class="ric-article__name ric-article__name--min-size">1 Mercedes-Benz CLA Shooting Brake 250 sport 7GDCT 4Matic very very long title long long
    					</div>
    					<div class="ric-article__price-box ric-article__price-box--min-size">
    						<span class="ric-article__price-label ric-article__bid">24 gebots</span>
    						<span class="ric-article__price-tag">4'444'44.45</span>
    					</div>
    					<div class="ric-article__price-box ric-article__price-box--min-size">
    						<span class="ric-article__price-label ric-article__buy">Kaufen</span>
    						<span class="ric-article__price-tag">4'444'44.45</span>
    					</div>
    				</div>
    			</div>
    
    			<div class="ric-article">
    				<div class="ric-article__image">
    					<img src="./assets/images/lumia_240_1-1_1x.png" alt="Some text" />
    				</div>
    				<div class="ric-article__main-container">
    					<div class="ric-article__name ric-color__main--text ric-article__name--min-size">1 Mercedes-Benz CLA Shooting Brake 250 sport 7GDCT 4Matic
    					</div>
    					<div class="ric-article__price-box ric-article__price-box--min-size">
    					</div>
    					<div class="ric-article__price-box ric-article__price-box--min-size">
    						<span class="ric-article__price-label ric-article__bid">Startgebot</span>
    						<span class="ric-article__price-tag">4'444'44.45</span>
    					</div>
    				</div>
    			</div>
    
    			<div class="ric-article">
    				<div class="ric-article__image">
    					<img src="./assets/images/lumia_240_1-1_1x.png" alt="Some text" />
    				</div>
    				<div class="ric-article__main-container">
    					<div class="ric-article__name ric-article__name--min-size">1 Mercedes-Benz CLA Shooting Brake 250 sport 7GDCT 4Matic
    					</div>
    					<div class="ric-article__price-box ric-article__price-box--min-size">
    					</div>
    					<div class="ric-article__price-box ric-article__price-box--min-size">
    						<span class="ric-article__price-label ric-article__buy">Kaufen</span>
    						<span class="ric-article__price-tag">4'444'44.45</span>
    					</div>
    				</div>
    			</div>
    
    			<div class="ric-article">
    				<div class="ric-article__image">
    					<img src="./assets/images/lumia_240_1-1_1x.png" alt="Some text" />
    				</div>
    				<div class="ric-article__main-container">
    					<div class="ric-article__name ric-article__name--min-size">1 Mercedes-Benz CLA Shooting Brake 250 sport 7GDCT 4Matic
    					</div>
    					<div class="ric-article__price-box ric-article__price-box--min-size">
    						<span class="ric-article__price-label ric-article__bid">Startgebot</span>
    						<span class="ric-article__price-tag">4'444'44.45</span>
    					</div>
    					<div class="ric-article__price-box ric-article__price-box--min-size">
    						<span class="ric-article__price-label ric-article__buy">Kaufen</span>
    						<span class="ric-article__price-tag">4'444'44.45</span>
    					</div>
    				</div>
    			</div>
    
    			<div class="ric-article">
    				<div class="ric-article__image">
    					<img src="./assets/images/lumia_240_1-1_1x.png" alt="Some text" />
    				</div>
    				<div class="ric-article__main-container">
    					<div class="ric-article__name ric-article__name--min-size">1 Mercedes-Benz CLA Shooting Brake 250 sport 7GDCT 4Matic
    					</div>
    					<div class="ric-article__price-box ric-article__price-box--min-size">
    						<span class="ric-article__price-label ric-article__bid">Startgebot</span>
    						<span class="ric-article__price-tag">4'444'44.45</span>
    					</div>
    					<div class="ric-article__price-box ric-article__price-box--min-size">
    						<span class="ric-article__price-label ric-article__buy">Kaufen</span>
    						<span class="ric-article__price-tag">4'444'44.45</span>
    					</div>
    				</div>
    			</div>
    
    			<div class="ric-article">
    				<div class="ric-article__image">
    					<img src="./assets/images/lumia_240_1-1_1x.png" alt="Some text" />
    				</div>
    				<div class="ric-article__main-container">
    					<div class="ric-article__name ric-article__name--min-size">1 Mercedes-Benz CLA Shooting Brake 250 sport 7GDCT 4Matic
    					</div>
    					<div class="ric-article__price-box ric-article__price-box--min-size">
    						<span class="ric-article__price-label ric-article__bid">Startgebot</span>
    						<span class="ric-article__price-tag">4'444'44.45</span>
    					</div>
    					<div class="ric-article__price-box ric-article__price-box--min-size">
    						<span class="ric-article__price-label ric-article__buy">Kaufen</span>
    						<span class="ric-article__price-tag">4'444'44.45</span>
    					</div>
    				</div>
    			</div>
    
    		</div>
    	</div>
    	<div class="ric-article-slider__fadeout ric-article-slider__fadeout--left"></div>
    	<button class="ric-article-slider__slide ric-article-slider__slide--left mdl-button mdl-button--fab mdl-js-button mdl-js-ripple-effect">
        <i class="material-icons">keyboard_arrow_left</i></button>
    	<div class="ric-article-slider__fadeout ric-article-slider__fadeout--right"></div>
    	<button class="ric-article-slider__slide ric-article-slider__slide--right mdl-button mdl-button--fab mdl-js-button mdl-js-ripple-effect">
        <i class="material-icons">keyboard_arrow_right</i></button>
    </div>
    <script>
    	var sliderContainer = document.querySelector('.ric-styleguide-demo-slider')
    	var slider = new ric.ArticleSlider(sliderContainer)
    </script>