Blockquotes
blocquote in the content
Nullam id orci consequat, luctus ligula lobortis, maximus neque. Vestibulum nulla ante, mollis vitae porta molestie, commodo in felis.
Markup: ..\..\styleguide\templates\atoms\content\blockquotes.html
<blockquote class="smartlb-a-blockquote">
<p>Nullam id orci consequat, luctus ligula lobortis, maximus neque. Vestibulum nulla ante, mollis vitae porta molestie, commodo in felis.</p>
<footer>
Someone famous in <cite title="Source Title"><a href="#">Source Title</a></cite>
</footer>
</blockquote>
../source/scss/components/atoms/content/_blockquotes.scss
, line 1
Chips Lables
Labels for displaying info
Markup: ..\..\styleguide\templates\atoms\chips-labels.html
<span class="rocksite-a-chips-label [modifier class]">Category Name</span>
../source/scss/components/atoms/_chips-labels.scss
, line 1
Countdown Info
Labels for displaying countdown numbers with label
Markup: ..\..\styleguide\templates\atoms\countdown-info.html
<div class="rocksite-m-countdown-info ">
<span class="rocksite-m-countdown-info__number">
23
</span>
<span class="rocksite-m-countdown-info__label">
Days
</span>
</div>
../source/scss/components/atoms/_contdown-info.scss
, line 1
Markup: ..\..\styleguide\templates\atoms\inputs\input.html
<input type="text" value="" id="input_text" name="search" placeholder="Search" class="rocksite-a-input [modifier class]">
../source/scss/components/atoms/_inputs.scss
, line 2
Markup: ..\..\styleguide\templates\atoms\inputs\select.html
<select name="select_option" class="rocksite-a-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>
../source/scss/components/atoms/_inputs.scss
, line 104
Textarea
Textarea field
Markup: ..\..\styleguide\templates\atoms\inputs\textarea.html
<textarea class="rocksite-a-textarea [modifier class]" id="input_text" name="message" rows="4" placeholder="Your Message" aria-invalid="false"></textarea>
../source/scss/components/atoms/_inputs.scss
, line 32
Headings
All types of headings
Heading text second line
Heading text second line
Heading text second line
Heading text second line
Heading text second line
Heading text second line
Heading text second line
Heading text second line
Heading text second line
Markup: ..\..\styleguide\templates\atoms\content\headings.html
<h1 class="rocksite-a-heading [modifier class]">Heading text second line</h1>
../source/scss/components/atoms/content/_headings.scss
, line 1
Icons
Labels for displaying info
Markup: ..\..\styleguide\templates\atoms\icon.html
<span class="rocksite-a-icon [modifier class]"><i class="la la-user-plus"></i></span>
../source/scss/components/atoms/_icons.scss
, line 1
Lables
Labels for displaying info
Markup: ..\..\styleguide\templates\atoms\labels.html
<span class="rocksite-a-label [modifier class]"><i class="las la-camera-retro"></i></span>
../source/scss/components/atoms/_labels.scss
, line 1
Link
general link
Markup
<a href="#">Link Button</a>
../source/scss/components/atoms/content/_link.scss
, line 1
List
Default list
- Lorem ipsum dolor sit amet, consectetur adipiscing elit
- Sed vel odio venenatis, mattis risus quis, facilisis nibh
- Phasellus eget consectetur nisi
- Donec tellus magna, varius vitae consectetur ac, mollis eget ligula
- Nam finibus a dolor ut pellentesque
- Vivamus gravida rhoncus quam, in congue dolor porta vitae
- Aliquam bibendum tempor ipsum nec fermentum
- Aenean ultricies libero quam, quis condimentum velit viverra a
- Lorem ipsum dolor sit amet, consectetur adipiscing elit
- Sed vel odio venenatis, mattis risus quis, facilisis nibh
- Phasellus eget consectetur nisi
- Donec tellus magna, varius vitae consectetur ac, mollis eget ligula
- Nam finibus a dolor ut pellentesque
- Vivamus gravida rhoncus quam, in congue dolor porta vitae
- Aliquam bibendum tempor ipsum nec fermentum
- Aenean ultricies libero quam, quis condimentum velit viverra a
- Lorem ipsum dolor sit amet, consectetur adipiscing elit
- Sed vel odio venenatis, mattis risus quis, facilisis nibh
- Phasellus eget consectetur nisi
- Donec tellus magna, varius vitae consectetur ac, mollis eget ligula
- Nam finibus a dolor ut pellentesque
- Vivamus gravida rhoncus quam, in congue dolor porta vitae
- Aliquam bibendum tempor ipsum nec fermentum
- Aenean ultricies libero quam, quis condimentum velit viverra a
- Lorem ipsum dolor sit amet, consectetur adipiscing elit
- Sed vel odio venenatis, mattis risus quis, facilisis nibh
- Phasellus eget consectetur nisi
- Donec tellus magna, varius vitae consectetur ac, mollis eget ligula
- Nam finibus a dolor ut pellentesque
- Vivamus gravida rhoncus quam, in congue dolor porta vitae
- Aliquam bibendum tempor ipsum nec fermentum
- Aenean ultricies libero quam, quis condimentum velit viverra a
- Lorem ipsum dolor sit amet, consectetur adipiscing elit
- Sed vel odio venenatis, mattis risus quis, facilisis nibh
- Phasellus eget consectetur nisi
- Donec tellus magna, varius vitae consectetur ac, mollis eget ligula
- Nam finibus a dolor ut pellentesque
- Vivamus gravida rhoncus quam, in congue dolor porta vitae
- Aliquam bibendum tempor ipsum nec fermentum
- Aenean ultricies libero quam, quis condimentum velit viverra a
- Lorem ipsum dolor sit amet, consectetur adipiscing elit
- Sed vel odio venenatis, mattis risus quis, facilisis nibh
- Phasellus eget consectetur nisi
- Donec tellus magna, varius vitae consectetur ac, mollis eget ligula
- Nam finibus a dolor ut pellentesque
- Vivamus gravida rhoncus quam, in congue dolor porta vitae
- Aliquam bibendum tempor ipsum nec fermentum
- Aenean ultricies libero quam, quis condimentum velit viverra a
Markup: ..\..\styleguide\templates\atoms\content\list.html
<ul class="rocksite-a-list [modifier class]">
<li class="rocksite-a-list__item">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li class="rocksite-a-list__item">Sed vel odio venenatis, mattis risus quis, facilisis nibh</li>
<li class="rocksite-a-list__item">Phasellus eget consectetur nisi</li>
<li class="rocksite-a-list__item">Donec tellus magna, varius vitae consectetur ac, mollis eget ligula</li>
<li class="rocksite-a-list__item">Nam finibus a dolor ut pellentesque</li>
<li class="rocksite-a-list__item">Vivamus gravida rhoncus quam, in congue dolor porta vitae</li>
<li class="rocksite-a-list__item">Aliquam bibendum tempor ipsum nec fermentum</li>
<li class="rocksite-a-list__item">Aenean ultricies libero quam, quis condimentum velit viverra a</li>
</ul>
../source/scss/components/atoms/content/_list.scss
, line 1
Logo
Brand Logo
Markup: ..\..\styleguide\templates\atoms\logo.html
<h4 class="rocksite-a-logo" itemprop="headline">
<a href="#" title="" rel="home" class="rocksite-a-logo__link">
<img src="../assets/images/logo.png" alt="" class="rocksite-a-logo__link__image">
</a>
</h4>
../source/scss/components/atoms/_logo.scss
, line 1
Markup: ..\..\styleguide\templates\atoms\progress-bar.html
<div class="rocksite-a-progress-bar">
<div class="rocksite-a-progress-bar__chart" style="width: 88%"></div>
</div>
../source/scss/components/atoms/_progress-bar.scss
, line 1
Tables
blocquote in the content
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Markup: ..\..\styleguide\templates\atoms\content\tables.html
<table class="rocksite-a-table [modifier class]">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
../source/scss/components/atoms/content/_tables.scss
, line 5
Text
All types of text sizes
Markup: ..\..\styleguide\templates\atoms\content\text.html
<span class="rocksite-a-text [modifier class]">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus justo mauris, vehicula in lacinia vitae, suscipit ut metus.</span>
../source/scss/components/atoms/content/_text.scss
, line 2