ATOMS
BRAND COLORS
NEUTRAL COLORS
UTILITY COLORS
FONTS
Primary font: “Muli Black”, italic, sans serif;
Secondary font: “Muli”, bold, sans serif;
Paragraph font: “Open Sans”, sans serif;
TEXT BUTTON
IMAGE MASKS
class="image-mask-1" class="image-mask-2" class="image-mask-3" FORM FIELDS / ELEMENTS
TEXT
HEADINGS
INLINE ELEMENTS
Strong is used to indicate strong importance
This text has added emphasis
The b element is stylistically different text from normal text, without any special importance
The i element is text that is set off from the normal text
The u element is text with an unarticulated, though explicitly rendered, non-textual annotation
This text is deleted and
This text has a strikethrough
SuperscriptSup
Subscript for things like H2O
This small text is small for for fine print, etc.
TEXT STYLES (continued) Design focused
PARAGRAPH
Default left <p>
Nam porttitor blandit accumsan. Ut vel dictum sem, a pretium dui. In malesuada enim in dolor euismod, id commodo mi consectetur. Curabitur at vestibulum nisi. Nullam vehicula nisi velit. Mauris turpis nisl, molestie ut ipsum et, suscipit vehicula odio. Vestibulum
BLOCKQUOTE
Nam porttitor blandit accumsan. Ut vel dictum sem, a pretium dui. In malesuada enim in dolor euismod, id commodo mi consectetur. Curabitur at vestibulum nisi. Nullam vehicula nisi velit. Mauris turpis nisl, molestie ut ipsum et, suscipit vehicula
TABLES
DEFAULT TABLE
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
STRIPED TABLE
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
LISTS
UNORDERED LIST
- List Item 1
- List Item 2
- List Item 3
ORDERED LIST
- List Item 1
- List Item 2
- List Item 3
.small-dots
- List Item 1
- List Item 2
- List Item 3
ul.list-group
- List Item 1
- List Item 2
- List Item 3
ol.list-group
- List Item 1
- List Item 2
- List Item 3
MOLECULES
Wells + media
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec urna in ante euismod suscipit. Duis et ultrices est. Praesent imperdiet dui nec tortor rhoncus, in scelerisque libero ullamcorper Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec urna in ante euismod suscipit. Duis et ultrices est. Praesent imperdiet dui nec tortor rhoncus, in scelerisque libero ullamcorper.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec urna in ante euismod suscipit. Duis et ultrices est. Praesent imperdiet dui nec tortor rhoncus, in scelerisque libero ullamcorper. Phasellus nec urna eu lectus placerat pellentesque in quis nisl. Duis ut mollis elit, non mollis est. Quisque lorem sem, lobortis ac arcu sit amet, viverra pulvinar dolor. Quisque interdum nunc at sapien vehicula, sit amet fringilla quam lobortis. Etiam vitae aliquet augue, vitae condimentum e
ORGANISMS
TEAM BLOCK OVERVIEW
[ff_team_overview] [ff_team_overview showposts=3]TEAM BLOCK OVERVIEW CAROUSEL
[ff_team_overview heading="Other profiles" heading_class="f-15" showposts=9 class="carousel-cols-3 navigation-style-2 mt-50"] [ff_team_overview heading="Other profiles" heading_class="f-15" showposts=9 class="carousel-cols-3 navigation-style-2 mt-50"]INSTAGRAM FEED
[ff_instagram_carousel] [ff_instagram_carousel num=10] [ff_instagram_carousel feed_type="hashtag" hashtag="webdesign"] [ff_instagram_carousel num=10 feed_type="hashtag" hashtag="webdesign"]NEWS
[ff_news_query showposts="NUM_HERE"] [ff_news_query showposts=3][ff_news_query style="2" showposts="NUM_HERE"] [ff_news_query style="2" showposts=3]ROTATING / CAROUSELS
[ff_logo_carousel heading="TEXT_HERE"]
[ff_item template="carousel-logo" image="IMAGE_URL" link="" alt=""]
[/ff_logo_carousel][ff_cta_carousel bg_color="#COLOR_HEX_CODE_HERE"]
[ff_item template="cta-1" heading="TEXT_HERE" text="TEXT_HERE" btn_text="TEXT_HERE" btn_link="#LINK_HERE"]
[/ff_cta_carousel]Heading here
Heading here
Heading here
[ff_testimonials_carousel heading="TEXT_HERE" limit=NUMBER].custom-scrollJust add “custom-scroll” for your div that have a fix height or width, Just add “custom-scroll” for your div that have a fix height or width
Just add “custom-scroll” for your div that have a fix height or width, Just add “custom-scroll” for your div that have a fix height or width
Just add “custom-scroll” for your div that have a fix height or width, Just add “custom-scroll” for your div that have a fix height or width
Just add “custom-scroll” for your div that have a fix height or width, Just add “custom-scroll” for your div that have a fix height or width
.custom-scroll.alt-1
1300 11 22 47