Typography
Headings
h1. Heading 1
Quisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet faucibus.
h2. Heading 2
Quisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet faucibus.
h3. Heading 3
Quisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet faucibus.
h4. Heading 4
Quisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet faucibus.
h5. Heading 5
Quisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet faucibus.
h6. Heading 6
Quisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet faucibus.
Big headings
Jumbo font
Add class .yjsg-font-jumbo
Quisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet faucibus.
Mega font
Add class .yjsg-font-mega
Quisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet faucibus.
Lists
Default
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
Ordered
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
Unstyled - add class .unstyled
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
Custom Lists
Add class .video
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
Add class .check
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
Add class .star
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
Add class .yjt_iconlist
- Using
.fa fa-bookclass - Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
Buttons
Button sizes
Button colors
Large colored buttons
Medium colored buttons
Small colored buttons
markup:
<button type="button" class="yjsg-button-blarge">Large button</button> <button type="button" class="yjsg-button-bmedium">Medium button</button> <button type="button" class="yjsg-button">Default</button> <button type="button" class="yjsg-button-bsmall">Small button</button> <button type="button" class="yjsg-button-color">Default color</button> <button type="button" class="yjsg-button-blue">Blue button</button> <button type="button" class="yjsg-button-red">Red button</button> <button type="button" class="yjsg-button-green">Green button</button> <button type="button" class="yjsg-button-yellow">Yellow button</button> <button type="button" class="yjsg-button-dark">Dark button</button> <button type="button" class="yjsg-button-gray">Gray button</button> <button type="button" class="yjsg-button-color-blarge">Default color</button> <button type="button" class="yjsg-button-blue-blarge">Blue button</button> <button type="button" class="yjsg-button-red-blarge">Red button</button> <button type="button" class="yjsg-button-green-blarge">Green button</button> <button type="button" class="yjsg-button-yellow-blarge">Yellow button</button> <button type="button" class="yjsg-button-dark-blarge">Dark button</button> <button type="button" class="yjsg-button-gray-blarge">Gray button</button> <button type="button" class="yjsg-button-color-bmedium">Default color</button> <button type="button" class="yjsg-button-blue-bmedium">Blue button</button> <button type="button" class="yjsg-button-red-bmedium">Red button</button> <button type="button" class="yjsg-button-green-bmedium">Green button</button> <button type="button" class="yjsg-button-yellow-bmedium">Yellow button</button> <button type="button" class="yjsg-button-dark-bmedium">Dark button</button> <button type="button" class="yjsg-button-gray-bmedium">Gray button</button> <button type="button" class="yjsg-button-color-bsmall">Default color</button> <button type="button" class="yjsg-button-blue-bsmall">Blue button</button> <button type="button" class="yjsg-button-red-bsmall">Red button</button> <button type="button" class="yjsg-button-green-bsmall">Green button</button> <button type="button" class="yjsg-button-yellow-bsmall">Yellow button</button> <button type="button" class="yjsg-button-dark-bsmall">Dark button</button> <button type="button" class="yjsg-button-gray-bsmall">Gray button</button>
Dividers
markup:
<div class="yjsg-hr-hrsolid"></div> <div class="yjsg-hr-hrdotted"></div> <div class="yjsg-hr-hrdashed"></div> <div class="yjsg-hr-small-hrsolid"></div> <div class="yjsg-hr-large-hrsolid"></div> <div class="yjsg-hr-small-hrsolid fa fa-star"></div> <div class="yjsg-hr-small-hrsolid famedium fa fa-star"></div> <div class="yjsg-hr-small-hrdashed falarge facolor fa fa-star"></div> <div class="yjsg-hr-small-hrsolid-left falarge facolor fa fa-star"></div> <div class="yjsg-hr-small-hrsolid-right falarge facolor fa fa-trophy"></div> <div class="yjsg-hr-small-hrsolid-hrcircle"></div> <div class="yjsg-hr-small-hrsolid-hrcircle-left"></div> <div class="yjsg-hr-small-hrsolid-hrcircle-right"></div> <div class="yjsg-hr-small-hrsolid-hrcircle-left-pull-small"></div> <div class="yjsg-hr-small-hrsolid-right-pull-small famedium facolor fa fa-star"></div> <div class="yjsg-hr-large-hrsolid-hrcircle-left-pull-large"></div> <div class="yjsg-hr-large-hrsolid-right-pull-large famedium facolor fa fa-star"></div>
Dropcaps
YQuisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet faucibus.
SQuisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet faucibus.
JQuisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet faucibus.
GQuisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet faucibus.
markup:
<span class="dropcap">Y</span>lypian... <span class="dropcap2">J</span>lypian... <span class="dropcap3">S</span>lypian... <span class="dropcap4">G</span>lypian...
Blockquotes
Blockquote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, conse ctetur adipiscing elit. Integer posuere erat
Someone famous in Source Title
Blockquote .pull-right
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, conse ctetur adipiscing elit. Integer posuere erat
Someone famous in Source Title
Blockquote quoted .quoted
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, conse ctetur adipiscing elit. Integer posuere erat
Someone famous in Source Title
Blockquote brackets .brackets
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, conse ctetur adipiscing elit. Integer posuere erat
Someone famous in Source Title
markup:
<blockquote>
<p>
Text...
</p>
</blockquote>
<blockquote class="pull-right">
<p>
Text...
</p>
</blockquote>
<blockquote class="quoted">
<p>
Text...
</p>
</blockquote>
<blockquote class="brackets">
<p>
Text...
</p>
</blockquote> Big numbers
Blocknumber
01 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat
02 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat
03 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat
Blocknumber round
01 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat
02 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat
03 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat
markup:
<p class="blocknumber">
<span class="bignumber">02</span> Sample...
</p>
<p class="blocknumber bnround">
<span class="bignumber">02</span> Sample...
</p> Additional
Emphasis classes
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
markup:
<p class="muted">
Fusce...
</p>
<p class="text-warning">
Etiam...
</p>
<p class="text-error">
Donec...
</p>
<p class="text-info">
Aenean...
</p>
<p class="text-success">
Duis...
</p> Addresses
Some Web Studio, Inc.1870 Northgate Hill DR
Atlanta, GA 30021
P: (123) 456-7890 Full Name
first.lastATyourmailDOTcom
markup:
<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">
first.lastATyourmailDOTcom
</a>
</address> Quick menu:
Custom button white
Your textmarkup:
<a class="button_white" href="#">Your text<span class="fa fa-chevron-down"></span></a>
Custom button color
Your textmarkup:
<a href="#" class="button_color">Your text</a>
Custom button dark
Your textmarkup:
<a class="button_dark" href="">Your text</a>
Custom button dark 2
Your textmarkup:
<a class="button_dark2" href="">Your text<span class="fa fa-chevron-down"></span></a>
Sign up for
our newsletter
Aliter enim nosmet ipsos nosse non possumus. Quid sequatur, quid repugnet, vident. Maximus dolor, inquit, brevis est.
Payment method
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean egestas condimentum felis, eget mollis nulla cursus nec. Fusce at sodales augue. Nullam ut augue libero.
LAURA
Aliter enim nosmet ipsos nosse non possumus. Quid sequatur, quid repugnet, vident. Maximus dolor, inquit, brevis est. Sed haec nihil sane ad rem. Phasel lus et urna id elit onvali.
Contact
123 Street Name, Zip Code, Town, Country
LauraShop@mail.com
00-358-6698-858