ATOMS
Psychometric Assessments
Reliably identify and develop employees
Having the able to reliably identify the qualities of new talent or current employees ensures a workplace can attract and develop a great team. This means greater organisational productivity & profitability.
BRAND COLORS
#235764
Brand Primary
#719693
Brand Primary
#DBBFB4
Brand Primary
#D6CEB6
Brand Primary
#DBBDC6
Brand Primary
NEUTRAL COLORS
#FBF9F3
Neutral
#F7F4EA
Neutral)
#EFEBDF
Neutral
#020612
Cool Black
#FFFFFF
White
#262A35
Dark Gray 1
#6B6C70
Dark Gray 2
#A7A8AA
Dark Gray 3
#E0E1E4
Light Gray 1
#F5F6F8
Light Gray 2(section BG)
UTILITY COLORS
#CE7791
Error
#719693
Positive
FONTS
Primary font: “Work Sans”, sans serif
Secondary font: Josefin Sans
Tertiary font: Lucky Fella
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.
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
Center <p class=”text-center”>
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
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]
Our Sponsors
[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
Content here
Heading here
Content here
Heading here
Content here
[ff_testimonials_carousel heading="TEXT_HERE" limit=NUMBER]
[ff_testimonials_carousel heading="Testimonials" limit=6]
.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
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, 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-1Just 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
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
