Accordion - FAQ
Accordion component
Markup: ..\..\styleguide\templates\molecules\accordion.html
<div class="rocksite-o-accordion " data-active-element="0"
role="tablist">
</div>
../source/scss/components/molecules/_accordion.scss
, line 1
Bars
Accordion component
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/scss/components/molecules/_bars.scss
, line 1
Card Box
Labels for displaying info
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/scss/components/molecules/_card.scss
, line 1
Radio Label
Labels for displaying info
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/scss/components/molecules/_checkbox-radio-label.scss
, line 40
Chips List
Chips List with label
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/scss/components/molecules/_chips-list.scss
, line 1
Counter Box
Your standard button suitable for clicking.
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 & Certyfications</p>
<p class="rocksite-m-counter-box__content__sufix">Changing the options for each once added</p>
</div>
</div>
../source/scss/components/molecules/_counter-box.scss
, line 1
Cover Header
Cover image component

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/scss/components/molecules/_cover-header.scss
, line 1
Hero Content
Short info box and icon
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/scss/components/molecules/_hero-content.scss
, line 1
Image - Figure
Image component


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't have to</figcaption>
</figure>
../source/scss/components/molecules/_image-figure.scss
, line 1
Info Box
Short info box and icon
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/scss/components/molecules/_info.scss
, line 1
Input Label
Labels for displaying info
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/scss/components/molecules/_input-label.scss
, line 1
Textarea Label
Labels for displaying info
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/scss/components/molecules/_textarea-label.scss
, line 1
Media Box
Box for displaying smal image and some info: author info, comments
Duis vitae lobortis odio, sed convallis lacus
Duis vitae lobortis odio, sed convallis lacus
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/scss/components/molecules/_media.scss
, line 1
Meta Labels
Labels for displaying meta
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/scss/components/molecules/_meta-labels.scss
, line 1
Pagination - number
Pointer navigation
- « Previous
- 1
- 2
- 3
- Next »
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/scss/components/molecules/_nav-pagination.scss
, line 1
Pagination - prev - next
Prev next navigation
- Older posts
- Newer posts
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/scss/components/molecules/_nav-pagination.scss
, line 64
Price List
create clean and stylish online restaurant menus or other content elements
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/scss/components/molecules/_price-list.scss
, line 1
Pricing Box
Pricing box info box and icon
Regular Version
- 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/scss/components/molecules/_pricing.scss
, line 1
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/scss/components/molecules/_progress-box.scss
, line 1
Radio Label
Labels for displaying info
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/scss/components/molecules/_checkbox-radio-label.scss
, line 1
Search Box
Classic search filed
Markup: ..\..\styleguide\templates\molecules\search-box.html
<form role="search" method="get" id="searchform-content"
class="rocksite-m-input-connections -searchform " action="//127.0.0.1:3000/wordpress4.8/">
<div class="rocksite-m-input-connections__group">
<input type="text" value="" name="s" class="rocksite-m-input-connections__group__input" placeholder="Search">
<span class="rocksite-m-input-connections__group__btn">
<button class="rocksite-a-button-icon -secondary">
<i class="la la-search"></i>
</button>
</span>
</div>
</form>
../source/scss/components/molecules/_form.scss
, line 3
Section Header
Your standard button suitable for clicking.
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/scss/components/molecules/_section-header.scss
, line 1
Select Label
Labels for displaying info
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/scss/components/molecules/_select-label.scss
, line 1
Site Description
Brand Logo
Rocksite Theme
Just another WordPress site
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/scss/components/molecules/_site-description.scss
, line 1
Team Box
Dispaying teams member info

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/scss/components/molecules/_team.scss
, line 1
Testimonial
Dispaying teams member info
After trying a few other themes (where half of the promised features werent working), I have found the perfect theme for my portfolio website.
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/scss/components/molecules/_testimonial.scss
, line 1