Web Style Guide
This is a sample style guide. The style guide sets out general design
principles for everyone working on the project to follow. It contains
a selection of styles rules and treatments used in this web project to
ensure brand identity and consistency across the site. Developers can
refer to code snippets document for quick implementation. Also, CSS style
code sample may acompany the elements.
For desktop and tablet.
Headings
Aa Heading 1 Aa Sub-heading
Aa Heading 2 Aa Sub-heading
Aa Heading 3 Aa Sub-heading
Aa Heading 4 Aa Sub-heading
Aa Heading 5 Aa Sub-heading
Aa Heading 6 Aa Sub-heading
∧
Paragraph
Aa Paragraph Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the scrambled it to make a type specimen book.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since.
It has survived not only five centuries, but also the leap into electronic typesetting.
∧
Type in Use
∧
Colors
Color in Use
∧
Unordered List
- But I must explain
- To you how all this mistaken
- Idea of denouncing pleasure
- Great explorer of the truth
- To take a trivial example
- Or one who avoids a pain
- Indignation and dislike men
- Nor again is there anyone
- But who has any right
- That they cannot foresee
- Who avoids a pain that produceg
- Consequences that are extremely
∧
Ordered List
- But I must explain
- To you how all this mistaken
- Idea of denouncing pleasure
- Great explorer of the truth
- To take a trivial example
- Or one who avoids a pain
- Indignation and dislike men
- Nor again is there anyone
- But who has any right
- That they cannot foresee
- Who avoids a pain that produceg
- Consequences that are extremely
∧
Blockquote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a printing and typesetting ante.
Author name in Book name
∧
Alignment
Class names: .text-left .text-center .text-right
LEFT
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
CENTER
It is a long established fact that a reader will be distracted
by the readable content.
RIGHT
There are many variations of passages of Lorem Ipsum available,
but the majority have.
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Felis euismod semper eget lacinia
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
∧
Other Text Classes
| Example text | Class name |
| Light |
.font-light
|
| Normal |
.font-normal
|
| Bold |
.font-bold
|
| Extra bold |
.font-extra-bold
|
| Uppercase |
.font-uppercase
|
| Transparent |
.font-trans
|
∧
Buttons
Use any of the available button classes to quickly create a styled button.
∧
Table
| Name | Phone | Street |
|---|---|---|
| Henry | Purus Gravida Sagittis Limited | 055 1753 4032 |
| Shelly | Posuere Enim Inc. | 0313 143 2317 |
| Edan | Quisque Imperdiet Company | 076 1743 8649 |
| Sophia | Quam Incorporated | 0863 826 7513 |
| Griffith | Tempor Erat Corp. | 0845 46 45 |
∧
Feature Panel
Feature Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan.
Nequias prorrum nisque dolorei uscipientis distemped moluptatios viderum facit ute sim aut voloratquiae reptat qui dolupta tecestibus delenihit volorem con cus vel imolore perferchicid mod ute optatibus qui corerch illaccus moleste mporporibus is dia accum isque plique planto isqui officta doluptur, il in cullessi dolorru ptatures non et pratem nam facipsaest accum venihicit, corem aditi quibus eatiusamus, aut quasped moluptae sentur aperchi llatum re diate quiat plabores reptiuntum quaecti usandaeptate voloriti audis re omnisti con non natur, core is endic to odicimus repudam nobitiatur reiur reptat in consedis consenda qui omnimpedis ea nobis dolectios qui tectatium audipsus dolecum volorror.
∧
Split Feature Panel
Feature Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan.
Nequias prorrum nisque dolorei uscipientis distemped moluptatios viderum facit ute sim aut voloratquiae reptat qui dolupta tecestibus delenihit volorem con cus vel imolore perferchicid mod ute optatibus qui corerch illaccus moleste mporporibus is dia accum isque plique planto isqui officta doluptur, il in cullessi dolorru ptatures non et pratem nam facipsaest accum venihicit, corem aditi quibus eatiusamus, aut quasped moluptae sentur aperchi llatum re diate quiat plabores reptiuntum quaecti usandaeptate voloriti audis re omnisti con non natur, core is endic to odicimus repudam nobitiatur reiur reptat in consedis consenda qui omnimpedis ea nobis dolectios qui tectatium audipsus dolecum volorror.