KSS Style Guide

<insert-markup>molecules.accordion-</insert-markup>
Markup: ..\..\styleguide\templates\molecules\accordion.html
<div class="rocksite-o-accordion " data-active-element="0"
     role="tablist">
</div>
Source: ../source/scss/components/molecules/_accordion.scss, line 1
<insert-markup>molecules.bars-</insert-markup>
.-close-btn
close button version
<insert-markup>molecules.bars-0</insert-markup>
Markup: ..\..\styleguide\templates\molecules\bars.html
<div class="rocksite-m-bars [modifier class]">
	<div class="rocksite-m-bars__bar"></div>
	<div class="rocksite-m-bars__bar"></div>
	<div class="rocksite-m-bars__bar"></div>
</div>
Source: ../source/scss/components/molecules/_bars.scss, line 1
<insert-markup>molecules.breadcrumbs-</insert-markup>
.-invert
inverted version
<insert-markup>molecules.breadcrumbs-0</insert-markup>
Markup: ..\..\styleguide\templates\molecules\breadcrumbs.html
<ol class="rocksite-m-breadcrumbs [modifier class]">
	<li class="rocksite-m-breadcrumbs__item">
		<a href="#">Home</a>
		<span class="rocksite-m-breadcrumbs__item__separator">/</span>
	</li>
	<li class="rocksite-m-breadcrumbs__item">
		<a href="#">Second Category</a>
		<span class="rocksite-m-breadcrumbs__item__separator">/</span>
	</li>
	<li class="rocksite-m-breadcrumbs__item">
		<a href="#">Last Category</a>
		<span class="rocksite-m-breadcrumbs__item__separator">/</span>
	</li>
</ol>
Source: ../source/scss/components/molecules/_nav-breadcrumbs.scss, line 1
<insert-markup>molecules.card-</insert-markup>
.-card-stack
card stacked version
<insert-markup>molecules.card-0</insert-markup>
.-text-box
large amount of text
<insert-markup>molecules.card-1</insert-markup>
.-card-stack-on-hover
stacked version on hover
<insert-markup>molecules.card-2</insert-markup>
Markup: ..\..\styleguide\templates\molecules\card.html
<div class="rocksite-m-card [modifier class]">


	<div class="rocksite-m-card__content">

		<h5 class="rocksite-m-card__content__title"><a href="#">Duis vitae lobortis odio, sed convallis lacus</a></h5>

		<div class="rocksite-m-card__content__meta">
			<span class="rocksite-m-meta-label"><i class="la la-calendar"></i> <a href="#"
																												rel="bookmark">
				<time class="entry-date published updated" datetime="2015-08-23T21:33:31+00:00">August 21</time>
			</a></span> <span class="rocksite-m-meta-label">Published by:  <a
			href="#" title="Posts by admin" rel="author">admin</a> </span>
		</div>
        <div class="rocksite-m-card__content__button">
        <a href="#" class="rocksite-a-button-icon [modifier class]"><i class="la la-arrow-right"></i>	<span>214 K</span>
        </a>
        
        
        </div>
	</div>
	<div class="rocksite-m-card__thumbnail">

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

	</div>

</div>
Source: ../source/scss/components/molecules/_card.scss, line 1
<insert-markup>molecules.checkbox.label-</insert-markup>
Markup: ..\..\styleguide\templates\molecules\checkbox-label.html
<div class="rocksite-m-label-checkbox ">
	<input name="checkbox_name" type="checkbox"  value="Option 1" id="input_checkbox" /><label class="rocksite-m-label-checkbox__label" for="input_checkbox">Your Name</label>
</div>
Source: ../source/scss/components/molecules/_checkbox-radio-label.scss, line 40
<insert-markup>molecules.chips.list-</insert-markup>
Markup: ..\..\styleguide\templates\molecules\chips-list.html
<div class="rocksite-m-chips-list ">
    <span class="rocksite-m-chips-list__label">
        <i class="la la-tags"></i>Tags:
    </span>

    <span class="rocksite-m-chips-list__item">
    <a href="http://127.0.0.1/wordpress5.0/tag/comments-2/" rel="tag">category</a>
    <a href="http://127.0.0.1/wordpress5.0/tag/comments-2/" rel="tag">comments</a>
    <a href="http://127.0.0.1/wordpress5.0/tag/comments-2/" rel="tag">articles</a>
    <a href="http://127.0.0.1/wordpress5.0/tag/comments-2/" rel="tag">more</a>
    </span>


</div>
Source: ../source/scss/components/molecules/_chips-list.scss, line 1
<insert-markup>molecules.content.banner-</insert-markup>
Test Image
Duis vitae lobortis odio, sed convallis lacus

Sed euismod blandit leo. Mauris malesuada mi id mi lacinia scelerisque. Vivamus nec nibh nec sem sagittis mollis et luctus neque. Morbi eget ligula euismod, auctor dui at, suscipit est. In a tristique leo, eu tristique augue. Quisque et placerat velit.

.-large-banner
larger version
<insert-markup>molecules.content.banner-0</insert-markup>
Test Image
Duis vitae lobortis odio, sed convallis lacus

Sed euismod blandit leo. Mauris malesuada mi id mi lacinia scelerisque. Vivamus nec nibh nec sem sagittis mollis et luctus neque. Morbi eget ligula euismod, auctor dui at, suscipit est. In a tristique leo, eu tristique augue. Quisque et placerat velit.

.-left-side-text
left side text
<insert-markup>molecules.content.banner-1</insert-markup>
Test Image
Duis vitae lobortis odio, sed convallis lacus

Sed euismod blandit leo. Mauris malesuada mi id mi lacinia scelerisque. Vivamus nec nibh nec sem sagittis mollis et luctus neque. Morbi eget ligula euismod, auctor dui at, suscipit est. In a tristique leo, eu tristique augue. Quisque et placerat velit.

.-right-side-text
right side
<insert-markup>molecules.content.banner-2</insert-markup>
Test Image
Duis vitae lobortis odio, sed convallis lacus

Sed euismod blandit leo. Mauris malesuada mi id mi lacinia scelerisque. Vivamus nec nibh nec sem sagittis mollis et luctus neque. Morbi eget ligula euismod, auctor dui at, suscipit est. In a tristique leo, eu tristique augue. Quisque et placerat velit.

Markup: ..\..\styleguide\templates\molecules\content-banner.html
<div class="rocksite-m-content-banner [modifier class]">

    <div class="rocksite-m-content-banner__image">
        <img src="../assets/images/pages/bg-woman.jpg" alt="Test Image"/>
    </div>

    <div class="rocksite-m-content-banner__wrapper">

        <div class="rocksite-m-content-banner__wrapper__item">

            <h5 class="rocksite-m-content-banner__wrapper__item__title"><a href="#">Duis vitae lobortis odio, sed convallis lacus</a></h5>

            <div class="rocksite-m-content-banner__wrapper__item__content">
                <p>Sed euismod blandit leo. Mauris malesuada mi id mi lacinia scelerisque. Vivamus nec nibh nec sem sagittis mollis et luctus neque. Morbi eget ligula euismod, auctor dui at, suscipit est. In a tristique leo, eu tristique augue. Quisque et placerat velit.</p>
            </div>
        </div>
    </div>



</div>
Source: ../source/scss/components/molecules/_content-banner.scss, line 1
<insert-markup>molecules.counter.box-</insert-markup>
1123

Awards & Certyfications

Changing the options for each once added

Markup: ..\..\styleguide\templates\molecules\counter-box.html
<div class="rocksite-m-counter-box">
	<div class="rocksite-m-counter-box__content">
		<span class="rocksite-m-counter-box__content__counter">1123</span>
		<p class="rocksite-m-counter-box__content__prefix">Awards &amp; Certyfications</p>
		<p class="rocksite-m-counter-box__content__sufix">Changing the options for each once added</p>
	</div>
</div>
Source: ../source/scss/components/molecules/_counter-box.scss, line 1
<insert-markup>molecules.cover.header-</insert-markup>
Test Image

Duis vitae lobortis odio, sed convallis lacus

dfgfdgfdgfd

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

    <div class="rocksite-m-cover-header__image">
        <img src="../assets/images/pages/bg-woman.jpg" alt="Test Image" />
    </div>
    <div class="rocksite-m-cover-header__wrapper">

        <div class="rocksite-m-cover-header__wrapper__content">

            <h1 class="rocksite-m-cover-header__wrapper__content__title">
                Duis vitae lobortis odio, sed convallis lacus
            </h1>
            <p class="rocksite-m-cover-header__wrapper__content__text">dfgfdgfdgfd</p>

        </div>
        <div class="rocksite-m-cover-header__wrapper__scroll">
            <a href="#" class="rocksite-a-button-icon "><i class="la la-arrow-down"></i>	<span>214 K</span>
            </a>
            
            
        </div>

    </div>





</div>
Source: ../source/scss/components/molecules/_cover-header.scss, line 1
<insert-markup>molecules.hero.content-</insert-markup>
Prus lobortis

Pellentesque nec nulla sagittis

Ut ultrices diam quis purus lobortis, quis viverra mauris feugiat. Pellentesque nec nulla sagittis, dictum erat vitae, venenatis eros

Markup: ..\..\styleguide\templates\molecules\hero-content.html
<div class="rocksite-m-hero-content ">
    <header class="rocksite-m-hero-content__header">
        <span class="rocksite-m-hero-content__header__above_title">Prus lobortis</span>
        <h2 class="rocksite-m-hero-content__header__title">Pellentesque nec nulla sagittis</h2>
    </header>
    <div class="rocksite-m-hero-content__content">

		<p>Ut ultrices diam quis purus lobortis, quis viverra mauris feugiat. Pellentesque nec nulla sagittis, dictum erat vitae, venenatis eros</p>

	</div>
    <div class="rocksite-m-hero-content__footer">

            <a href="#" class="rocksite-a-button -primary">
            	Read more
            </a>
            
            


            <a href="#" class="rocksite-a-button -ghost">
            	Contact Us
            </a>
            
            

    </div>
</div>
Source: ../source/scss/components/molecules/_hero-content.scss, line 1
<insert-markup>molecules.image.figure-</insert-markup>
Try selecting and removing or editing the caption, now you don't have to
.-card
1 column
<insert-markup>molecules.image.figure-0</insert-markup>
Try selecting and removing or editing the caption, now you don't have to
Markup: ..\..\styleguide\templates\molecules\image-figure.html
<figure class="rocksite-m-image-figure [modifier class]">
	<img width="350" height="350" src="../assets/images/photo-gallery.jpg" class="rocksite-m-image-figure__image" alt="" />
	<figcaption class="rocksite-m-image-figure__caption">Try selecting and removing or editing the caption, now you don&#x27;t have to</figcaption>
</figure>
Source: ../source/scss/components/molecules/_image-figure.scss, line 1
<insert-markup>molecules.info-</insert-markup>

User Settings

Ut ultrices diam quis purus lobortis, quis viverra mauris feugiat. Pellentesque nec nulla sagittis, dictum erat vitae, venenatis eros

.-left-icon
e-mail icon
<insert-markup>molecules.info-0</insert-markup>

User Settings

Ut ultrices diam quis purus lobortis, quis viverra mauris feugiat. Pellentesque nec nulla sagittis, dictum erat vitae, venenatis eros

.-right-icon
Twitter
<insert-markup>molecules.info-1</insert-markup>

User Settings

Ut ultrices diam quis purus lobortis, quis viverra mauris feugiat. Pellentesque nec nulla sagittis, dictum erat vitae, venenatis eros

Markup: ..\..\styleguide\templates\molecules\info.html
<div class="rocksite-m-info [modifier class]">
	<div class="rocksite-m-info__content">

		<h3 class="rocksite-m-info__content__title">User Settings</h3>

		<p>Ut ultrices diam quis purus lobortis, quis viverra mauris feugiat. Pellentesque nec nulla sagittis, dictum erat vitae, venenatis eros</p>

	</div>
    <div class="rocksite-m-info__icon">
	    <span class="rocksite-a-icon -large"><i class="la la-user-plus"></i></span>
	    
	    
    </div>
</div>
Source: ../source/scss/components/molecules/_info.scss, line 1
<insert-markup>molecules.input.label-</insert-markup>
Markup: ..\..\styleguide\templates\molecules\input-label.html
<div class="rocksite-m-label-textarea ">


	<label for="input_text" class="rocksite-m-label-textarea__label">Your Name</label>
	<textarea class="rocksite-a-textarea rocksite-m-label-textarea__textarea" id="input_text" name="your-message" rows="4" placeholder="" aria-invalid="false"></textarea>

</div>
Source: ../source/scss/components/molecules/_input-label.scss, line 1
<insert-markup>molecules.input.label-</insert-markup>
Markup: ..\..\styleguide\templates\molecules\textarea-label.html
<div class="rocksite-m-label-textarea ">


	<label for="input_text" class="rocksite-m-label-textarea__label">Your Name</label>
	<textarea class="rocksite-a-textarea rocksite-m-label-textarea__textarea" id="input_text" name="your-message" rows="4" placeholder="" aria-invalid="false"></textarea>

</div>
Source: ../source/scss/components/molecules/_textarea-label.scss, line 1

Media Box

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Box for displaying smal image and some info: author info, comments

<insert-markup>molecules.media-</insert-markup>
Image
Duis vitae lobortis odio, sed convallis lacus
Maecenas aliquam diam non mattis pharetra. In mollis augue nec ante congue, sed blandit diam iaculis. Vivamus ut mollis diam, at dictum dui. Sed interdum purus justo, id eleifend odio vestibulum eu. Morbi bibendum mattis nibh, vitae rhoncus turpis iaculis in. Pellentesque suscipit rutrum sodales.
.-small-header
smaller version of header
<insert-markup>molecules.media-0</insert-markup>
Image
Duis vitae lobortis odio, sed convallis lacus
Maecenas aliquam diam non mattis pharetra. In mollis augue nec ante congue, sed blandit diam iaculis. Vivamus ut mollis diam, at dictum dui. Sed interdum purus justo, id eleifend odio vestibulum eu. Morbi bibendum mattis nibh, vitae rhoncus turpis iaculis in. Pellentesque suscipit rutrum sodales.
Markup: ..\..\styleguide\templates\molecules\media.html
<div class="rocksite-m-media [modifier class]">

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

	<div class="rocksite-m-media__content">

		<h5 class="rocksite-m-media__content__title"><a href="#">Duis vitae lobortis odio, sed convallis lacus</a></h5>

		<div class="rocksite-m-media__content__meta">
			<span class="rocksite-m-meta-label"><i class="la la-calendar"></i> <a href="#"
																												rel="bookmark">
				<time class="entry-date published updated" datetime="2015-08-23T21:33:31+00:00">August 21</time>
			</a></span> <span class="rocksite-m-meta-label">Published by:  <a
			href="#" title="Posts by admin" rel="author">admin</a> </span>
		</div>
		<div class="rocksite-m-media__content__excerpt">
			Maecenas aliquam diam non mattis pharetra. In mollis augue nec ante congue, sed blandit diam iaculis. Vivamus ut mollis diam, at dictum dui. Sed interdum purus justo, id eleifend odio vestibulum eu. Morbi bibendum mattis nibh, vitae rhoncus turpis iaculis in. Pellentesque suscipit rutrum sodales.
		</div>
        <div class="rocksite-m-media__content__button">
        <a href="#" class="rocksite-a-button -primary -small">
        	Click me
        </a>
        
        
        </div>
	</div>


</div>
Source: ../source/scss/components/molecules/_media.scss, line 1
<insert-markup>molecules.menu-</insert-markup>
.-horizontal
horizontal version: wrapped, without submenu (display none forced)
<insert-markup>molecules.menu-0</insert-markup>
.-horizontal-underlined
horizontal & underlined
<insert-markup>molecules.menu-1</insert-markup>
.-invert
inverted version
<insert-markup>molecules.menu-2</insert-markup>
.-dropdown-menu
one line (no wrapp) + submeny if exists
<insert-markup>molecules.menu-3</insert-markup>
Markup: ..\..\styleguide\templates\molecules\menu.html
<ul class="rocksite-m-nav-menu [modifier class]">


    <li class="rocksite-m-nav-menu__item  "><a
            href="#" class="rocksite-m-nav-menu__link">Home Page</a>

    </li>

    <li class="rocksite-m-nav-menu__item  "><a
            href="#" class="rocksite-m-nav-menu__link">About Us</a>

    </li>

    <li class="rocksite-m-nav-menu__item -has-children "><a
            href="#" class="rocksite-m-nav-menu__link">Services</a>


    <ul class="rocksite-m-nav-menu__sub-nav">


    <li class="rocksite-m-nav-menu__sub-nav__item"><a
            href="#" class="rocksite-m-nav-menu__sub-nav__link">Submenu 1</a></li>

    <li class="rocksite-m-nav-menu__sub-nav__item"><a
            href="#" class="rocksite-m-nav-menu__sub-nav__link">Submenu 2</a></li>

    <li class="rocksite-m-nav-menu__sub-nav__item"><a
            href="#" class="rocksite-m-nav-menu__sub-nav__link">Submenu 3</a></li>
    </ul>
    </li>

    <li class="rocksite-m-nav-menu__item  "><a
            href="#" class="rocksite-m-nav-menu__link">Our Offer</a>

    </li>

    <li class="rocksite-m-nav-menu__item  "><a
            href="#" class="rocksite-m-nav-menu__link">Contact Us</a>

    </li>


</ul>
Source: ../source/scss/components/molecules/_nav-menu.scss, line 1
<insert-markup>molecules.meta.label-</insert-markup>
Published By Admin
.-small
plain label displaying in meta area
<insert-markup>molecules.meta.label-0</insert-markup>
Published By Admin
Markup: ..\..\styleguide\templates\molecules\meta-labels.html
<span class="rocksite-m-meta-label [modifier class]"><em>Published By</em> <a href="#" rel="bookmark">Admin</a></span>
Source: ../source/scss/components/molecules/_meta-labels.scss, line 1
<insert-markup>molecules.navigation.arrow.control-</insert-markup>
Markup: ..\..\styleguide\templates\molecules\nav-control-arrows.html
<ul class="rocksite-m-direction-nav">
	<li class="rocksite-m-nav-prev"><a href="#" class="rocksite-a-button-icon "><i class="la la-angle-left"></i></a></li>
	<li class="rocksite-m-nav-next"><a href="#" class="rocksite-a-button-icon "><i class="la la-angle-right"></i></a></li>
</ul>
Source: ../source/scss/components/molecules/_nav-control.scss, line 127
<insert-markup>molecules.navigation.pointer.control-</insert-markup>
  1. 1
  2. 2
  3. 3
Markup: ..\..\styleguide\templates\molecules\nav-control-pointer.html
<ol class="rocksite-m-control-nav">
	<li><a class="">1</a></li>
	<li class="-active"><a >2</a></li>
	<li><a class="">3</a></li>
</ol>
Source: ../source/scss/components/molecules/_nav-control.scss, line 31
<insert-markup>molecules.navigation.pointer.control-</insert-markup>
  1. 1
  2. 2
  3. 3
Markup: ..\..\styleguide\templates\molecules\nav-control-pointer.html
<ol class="rocksite-m-control-nav">
	<li><a class="">1</a></li>
	<li class="-active"><a >2</a></li>
	<li><a class="">3</a></li>
</ol>
Source: ../source/scss/components/organisms/_nav-next-post.scss, line 158
<insert-markup>molecules.pagination.number-</insert-markup>
Markup: ..\..\styleguide\templates\molecules\pagination.html
<ul class="rocksite-m-pagination rocksite-m-pagination--number">
	<li class="rocksite-m-pagination__item"><a class="prev page-numbers"
											   href="#">«
		Previous</a></li>
	<li class="rocksite-m-pagination__item"><a class="page-numbers"
											   href="#">1</a></li>
	<li class="rocksite-m-pagination__item"><span aria-current="page" class="page-numbers current">2</span></li>
	<li class="rocksite-m-pagination__item"><a class="page-numbers"
											   href="#">3</a></li>
	<li class="rocksite-m-pagination__item"><a class="next page-numbers"
											   href="#">Next »</a>
	</li>
</ul>
Source: ../source/scss/components/molecules/_nav-pagination.scss, line 1
<insert-markup>molecules.pagination.prevnext-</insert-markup>
Markup: ..\..\styleguide\templates\molecules\pagination-prev-next.html
<ul class="rocksite-m-pagination rocksite-m-pagination--prev-next">
	<li class="rocksite-m-pagination--prev-next__item"><a href="#" class="rocksite-m-pagination--prev-next__item__link"><span class="rocksite-a-button-icon"><i class="la la-long-arrow-left"></i></span> Older posts</a></li>
	<li class="rocksite-m-pagination--prev-next__item"><a href="#" class="rocksite-m-pagination--prev-next__item__link">Newer posts <span class="rocksite-a-button-icon"><i class="la la-long-arrow-right"></i></span></a></li>
</ul>
Source: ../source/scss/components/molecules/_nav-pagination.scss, line 64

Price List

Toggle full screen Open in new window 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
<insert-markup>molecules.pricing-</insert-markup>

Regular Version

$120 / monthly
  • Up to 20 users
  • 50GB
  • Statistics and tracking
Markup: ..\..\styleguide\templates\molecules\pricing.html
<div class="rocksite-m-pricing-box ">
	<h4 class="rocksite-m-pricing-box__title">
		Regular Version
	</h4>
	<div class="rocksite-m-pricing-box__price">
		<span class="rocksite-m-pricing-box__price__currency">$</span><span class="rocksite-m-pricing-box__price__amount">120</span>
		<span class="rocksite-m-pricing-box__price__period"> / monthly</span>
	</div>
	<ul class="rocksite-m-pricing-box__features">
		<li>Up to 20 users</li>
		<li>50GB</li>
		<li>Statistics and tracking</li>
	</ul>
    <div class="rocksite-m-pricing-box__footer">
	    <a href="#" class="rocksite-a-button -primary">
	    	Click me
	    </a>
	    
	    
    </div>
</div>
Source: ../source/scss/components/molecules/_pricing.scss, line 1
<insert-markup>molecules.progress.box-</insert-markup>
GRAPHICS DESIGN20 %
Markup: ..\..\styleguide\templates\molecules\progress-box.html
<div class="rocksite-w-progress-chart__line rocksite-m-progress-box">
	<div class="rocksite-m-progress-box__header"><span class="rocksite-m-progress-box__header__title">GRAPHICS DESIGN</span><em class="rocksite-m-progress-box__header__number">20 %</em></div>
	<div class="rocksite-a-progress-bar">
		<div class="rocksite-a-progress-bar__chart js-chartbox" data-from="1" data-to="20"></div>
	</div>

</div>
Source: ../source/scss/components/molecules/_progress-box.scss, line 1
<insert-markup>molecules.radio.label-</insert-markup>
Markup: ..\..\styleguide\templates\molecules\radio-label.html
<div class="rocksite-m-label-radio ">
	<input name="radio_name" type="radio" value="Option 1" id="input_radio" /><label class="rocksite-m-label-radio__label" for="input_radio">Your Name</label>
</div>
Source: ../source/scss/components/molecules/_checkbox-radio-label.scss, line 1
<insert-markup>molecules.section.header-</insert-markup>

Quisque tristique ligula

Donec malesuada augue non erat dictum, vitae efficitur

Maecenas vulputate tortor sit amet egestas rhoncus

Markup: ..\..\styleguide\templates\molecules\section-header.html
<header class="rocksite-o-section-header ">
	<p class="rocksite-o-section-header__abovetitle">Quisque tristique ligula</p>
	<h2 class="rocksite-o-section-header__title">Donec malesuada augue non erat dictum, vitae efficitur</h2>
	<p class="rocksite-o-section-header__subtitle"> Maecenas vulputate tortor sit amet egestas rhoncus</p>
</header>
Source: ../source/scss/components/molecules/_section-header.scss, line 1
<insert-markup>molecules.select.label-</insert-markup>
Markup: ..\..\styleguide\templates\molecules\select-label.html
<div class="rocksite-m-label-select ">


	<label for="input_text" class="rocksite-m-label-select__label">Select this option</label>
	<select name="select_option" class="rocksite-a-select rocksite-m-label-input__select" aria-label="Shop order">
	
	    <option value="first-option">
	        First option
	    </option>
	
	
	    <option value="second-option" selected="selected">
	        Second option
	    </option>
	
	
	
	    <option value="third-option">
	        Third option
	    </option>
	
	
	    <option value="fourth-option">
	        Fourth option
	    </option>
	
	
	</select>
</div>
Source: ../source/scss/components/molecules/_select-label.scss, line 1
<insert-markup>molecules.site.description-</insert-markup>

Rocksite Theme

Just another WordPress site

-invert
inverted version
<insert-markup>molecules.site.description-0</insert-markup>

Rocksite Theme

Just another WordPress site

Markup: ..\..\styleguide\templates\molecules\site-description.html
<div class="rocksite-m-site-description [modifier class]" itemprop="headline">
    <h4 class="rocksite-m-site-description__title">Rocksite Theme</h4>
    <p class="rocksite-m-site-description__description">Just another WordPress site</p>
</div>
Source: ../source/scss/components/molecules/_site-description.scss, line 1
<insert-markup>molecules.social.share.button-</insert-markup>
.-small
card stacked version
<insert-markup>molecules.social.share.button-0</insert-markup>
.-email
card stacked version
<insert-markup>molecules.social.share.button-1</insert-markup>
.-facebook
card stacked version
<insert-markup>molecules.social.share.button-2</insert-markup>
.-twitter
card stacked version
<insert-markup>molecules.social.share.button-3</insert-markup>
.-gplus
card stacked version
<insert-markup>molecules.social.share.button-4</insert-markup>
.-pinterest
card stacked version
<insert-markup>molecules.social.share.button-5</insert-markup>
.-instagram
card stacked version
<insert-markup>molecules.social.share.button-6</insert-markup>
.-linkedin
card stacked version
<insert-markup>molecules.social.share.button-7</insert-markup>
.-default
card stacked version
<insert-markup>molecules.social.share.button-8</insert-markup>
Markup: ..\..\styleguide\templates\molecules\social-share-button.html
<a href="#" class="rocksite-m-social-share-button [modifier class]">
	<span class="rocksite-m-social-share-button__icon">
		<i class="lab la-facebook-f"></i>
	</span>
	<span class="rocksite-m-social-share-button__text">
		Facebook
	</span>
	<span class="rocksite-m-social-share-button__counter">219 K</span>
</a>


Source: ../source/scss/components/molecules/_social-share-button.scss, line 1
<insert-markup>molecules.team.box-</insert-markup>

Jonathan Test

Author

Wnde omnis iste natus error sit voluptatem accusantium doloremque laudantium

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

	<div class="rocksite-m-team__image">
		<img  src="../assets/images/person-men.jpg" class="img-responsive" alt="">
	</div>
	<div class="rocksite-m-team__item">
	<h4 class="rocksite-m-team__item__title">Jonathan Test</h4>
		<p class="rocksite-m-team__item__subtitle">Author</p>
		<p class="rocksite-m-team__item__content">Wnde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>

	</div>
	<ul class="rocksite-m-team__shares rocksite-m-nav-menu -horizontal -icons">
		<li class="rocksite-m-nav-menu__item"><a href="#" class="rocksite-a-button-social -email">
		<i class="fa fa-envelope"></i>
</a>


</li>
		<li class="rocksite-m-nav-menu__item"><a href="#" class="rocksite-a-button-social -twitter">
		<i class="fab fa-twitter"></i>
</a>


</li>
		<li class="rocksite-m-nav-menu__item"><a href="#" class="rocksite-a-button-social -facebook">
		<i class="fab fa-facebook-f"></i>
</a>


</li>
		<li class="rocksite-m-nav-menu__item"><a href="#" class="rocksite-a-button-social -gplus">
		<i class="fab fa-google-plus-g"></i>
</a>


</li>
	</ul>

</div>


Source: ../source/scss/components/molecules/_team.scss, line 1
<insert-markup>molecules.testimonial-</insert-markup>

After trying a few other themes (where half of the promised features werent working), I have found the perfect theme for my portfolio website.

.-invert
inverted version
<insert-markup>molecules.testimonial-0</insert-markup>

After trying a few other themes (where half of the promised features werent working), I have found the perfect theme for my portfolio website.

Markup: ..\..\styleguide\templates\molecules\testimonial.html
<div class="rocksite-m-testimonial [modifier class]">

    <div class="rocksite-m-testimonial__content">
        <p>After trying a few other themes (where half of the promised features werent working), I have found the perfect theme for my portfolio website.</p>
    </div>
    <footer class="rocksite-m-testimonial__footer">
        <div class="rocksite-m-testimonial__footer__image">
            <img src="../assets/images/men-avatar-1.png" />
        </div>
        <div class="rocksite-m-testimonial__footer__content">
            <h5 class="rocksite-m-testimonial__footer__content__title">
                John Scope</h5>
            <span class="rocksite-m-testimonial__footer__content__subtitle">CEO Brand</span>
        </div>

    </footer>
</div>
Source: ../source/scss/components/molecules/_testimonial.scss, line 1