Typography
H1:
There are 2 types of H1, one for a page with a hero image which the text sits over and one without an image or colour underneath.
+ / Atomic / Header
Under the 'Style' tab, type the style name 'c-h1' or 'c-hero-h1'
Header 1 / 40px / Blue-Dark
(I have dropped this onto a green background so you can see the white text)
Hero Header 1 / 40px / White
H2:
+ / Atomic / Header
Under the 'Style' tab, type the style name 'c-h2'
Then to add the dividing line under
+ / Atomic / Divider
Under the 'Style' tab, type the style name 'c-divider'
Header 2 / 32px / blue-dark
H3:
+ / Atomic / Header
Under the 'Style' tab, type the style name 'c-h3'
Header 3 / 30px / blue-dark
H4:
+ / Atomic / Header
Under the 'Style' tab, type the style name 'c-h4'
Header 4 / 24px / blue-dark
Color Palette
Showcase your primary, secondary, and neutral colors with their exact Hex codes so team members can copy them accurately.
green #9FC53B
body #67757D
blue-dark #0A404A
blue-light #e9f4f3
alt-yellow #ffe94b
alt-ice #9fd3cf
alt-grey #d7d9d8
Buttons and text links
We have various button and text link styles as follows:
+ / Atomic / Button
Under the 'Style' tab, type the style name 'c-btn-primary'
+ / Atomic / Button
Under the 'Style' tab, type the style name 'c-btn-download'
This button style automatically adds the download icon.
+ / Atomic / Button
Under the 'Style' tab, type the style name 'c-btn-download'
This button style automatically adds the download icon.
If you want to add an inline-text links, you need to:
+ / Favourites / Text Editor
Inline text links look like, this.
Specific blocks
A component needs to have a container around it, and the element inside can then be a component.
To use a component:
+ / Components / click and drag which you want onto the canvas
In the panel on the left, you will see the fields which are editable.
Current component blocks:
1. Block - Hero (Picture and title are editable) - the pic needs to be min height 500 x 500px - if its too small it will stretch
2. Multi colour numbered list (list with 2px coloured line above each item)
3. Important information block (risk warning) - create container with class ‘c-block-grey’ (add this in under the ‘advanced’ CSS Classes bit), then add in Block - Risk
4. The Contact block is container with class ‘c-block-dark’ and the
For a full width block (which goes right to the sides of the browser window), you need to go to +/ Atomic / and drag a 'Div block' onto the canvas.
Add a style name 'c-full-nomargin' to this div and then add your component (eg c-block-full-grey)
Some title
At Citrus Financial, we believe that peace of mind starts with good planning. That’s why we offer clients access to a professional will writing service.
Helping you put your wishes in writing, protect your loved ones, and plan for the future.
Some title
Some text in here
Nobody knows thNobody knows the answer to everything but everyone is great at something! fdsfsdf dsfsdf dsff dsfsd fdsf dsfds fdsf dsfdsfd sfdsfsdf dsf dsfNobody knows the answer to everything but everyone is great at something! fdsfsdf dsfsdf dsff dsfsd fdsf dsfds fdsf dsfdsfd sfdsfsdf dsf dsf
