KSS Style Guide

Price List

Toggle example guides Toggle HTML markup

create clean and stylish online restaurant menus or other content elements

<insert-markup>molecules.price.list-</insert-markup>
Image
Duis vitae lobortis odio
$ 18.99

Maecenas aliquam diam non mattis pharetra. In mollis augue nec ante congue.

Markup: ..\..\styleguide\templates\molecules\price-list.html
<div class="rocksite-m-price-list ">

	<div class="rocksite-m-price-list__thumbnail">
		<a href="#" class="rocksite-m-media__thumbnail__link"><img src="../assets/images/portfolio-image1.jpg" alt="Image"></a>
	</div>

	<div class="rocksite-m-price-list__content">

		<header class="rocksite-m-price-list__content__header">

			<h5 class="rocksite-m-price-list__content__header__title">Duis vitae lobortis odio</h5>
			<span class="rocksite-m-price-list__content__header__price-line"></span>
			<span class="rocksite-m-price-list__content__header__price-wrapper">
				<span class="rocksite-m-price-list__content__header__price-wrapper__currency">$ </span>
				<span class="rocksite-m-price-list__content__header__price-wrapper__ammount">18.99</span>
			</span>
		</header>
		<span class="rocksite-m-price-list__content__label">Recommend</span>
		<p class="rocksite-m-price-list__content__description">
			Maecenas aliquam diam non mattis pharetra. In mollis augue nec ante congue.
		</p>
	</div>


</div>
Source: ../source/scss/components/molecules/_price-list.scss, line 1