UI Elements

© 2022 FCBHEALTH

Colors

Brand Interface Colors

pRIMARY
Secondary
tertiary

Baseline Interface Colors

Black#000000
Dark Grey#4D4D4D
Medium grey#787878
Light Grey#CCCCCC
Off White#F7F7F7
White#ffffff

Validation Interface Colors

Error rED#D94B7E
Success green#31AE6B

Typography

Large Screens

Display

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

Body

Small Screens

Display

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

N/A

N/A

N/A

N/A

Unordered List

  • List item text goes here
    1. List item text goes here
    2. List item text goes here
  • List item text goes here
  • List item text goes here

Ordered List

  • List item text goes here
    1. List item text goes here
    2. List item text goes here
  • List item text goes here
  • List item text goes here

Iconography

Functional

Display sizes = 50x50px or 34x34px

Alert
Arrow
Arrow Tailed
Audio Off
Audio On
Basket
Bookmark
Calendar
Chat
Close
Cookies
Document
Download
Edit
Email
Exit
Expand
Fast Forward
Filter
Globe
Grid
Heart
Home
Info
Link
List
Lock
Menu
Minus
More
News
Notification
Pause
Phone
Pin
Play
Plus
Podcast
Presentation
Profile
Questions
Refresh
Rewind
Search
Settings
Share
Star
Tick
Rewind
Upload
Video
View
Wifi
Work
Facebook
Instagram
Linkedin
Pintrest
Twitter
YouTube
Vimeo

Graphic

Display size = 240x220px(retina display) — Generally uploaded as a .png image within the CMS

  • Buttons, Links & CTAs

    Buttons

    Actions

    Tags

    Links

    Form Elements

    Input Fields

    Icon=False

    Error message goes here

    Success message goes here

    Icon=True

    Error message goes here

    Success message goes here if any

    Dropdown & Search Box Field

    Dropdown Field

    Error message goes here

    Success message goes here if any

    Search Box

    Error message goes here

    Success message goes here if any

    Message Field

    Icon=False

    Error message goes here

    Success message goes here

    Icon=True

    Error message goes here

    Success message goes here if any

    Switch

    Checkbox

    Radio Button

    Lists & Selections

    Listed Menu

    Date Selection

    In-page Navigation

    Accordion

    Body text for this section will go here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non mi magna. Pellentesque lobortis tempus massa a tincidunt. Duis id dui eget ante volutpat ultrices imperdiet eu felis. Fusce imperdiet urna felis, sed rhoncus sem feugiat nec. Praesent suscipit urna a arcu aliquam congue.

    Phasellus nec luctus urna. Aenean suscipit imperdiet sem. Vestibulum vel sapien eleifend, posuere justo a, facilisis metus. Aenean volutpat justo non sodales dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a sem nibh. Sed porttitor dui ultricies, fringilla ipsum ac, congue magna. Morbi nisi nisi, efficitur ac porttitor fringilla, finibus finibus ipsum.

    Body text for this section will go here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non mi magna. Pellentesque lobortis tempus massa a tincidunt. Duis id dui eget ante volutpat ultrices imperdiet eu felis. Fusce imperdiet urna felis, sed rhoncus sem feugiat nec. Praesent suscipit urna a arcu aliquam congue.

    Phasellus nec luctus urna. Aenean suscipit imperdiet sem. Vestibulum vel sapien eleifend, posuere justo a, facilisis metus. Aenean volutpat justo non sodales dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a sem nibh. Sed porttitor dui ultricies, fringilla ipsum ac, congue magna. Morbi nisi nisi, efficitur ac porttitor fringilla, finibus finibus ipsum.

    Body text for this section will go here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non mi magna. Pellentesque lobortis tempus massa a tincidunt. Duis id dui eget ante volutpat ultrices imperdiet eu felis. Fusce imperdiet urna felis, sed rhoncus sem feugiat nec. Praesent suscipit urna a arcu aliquam congue.

    Phasellus nec luctus urna. Aenean suscipit imperdiet sem. Vestibulum vel sapien eleifend, posuere justo a, facilisis metus. Aenean volutpat justo non sodales dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a sem nibh. Sed porttitor dui ultricies, fringilla ipsum ac, congue magna. Morbi nisi nisi, efficitur ac porttitor fringilla, finibus finibus ipsum.

    Tab Navigation

    Pagenation

    Progress & Descriptors

    Progress Bar

    20% Complete

    Step Progress

    Tooltip

    Tooltip text goes here

    Scroll-Line

    Scroll

    Progress Dots

    Preloaders

    Loading...

    Eyebrow

    * Small descriptive title text that sits above H1,H2,H3 and H4 text only.For accessibility reasons, its hierarchy should be adjusted accordingly for screen readers.

    Max characters with spaces = 50

    Caption

    Caption Label

    Scroll-Arrow

    Scroll for more

    Cards

    Product Card

    *Clicks through to page

    Desktop - Default

    Product title goes here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod incididunt ut labore et dolore magna aliqua, enim ad minim veniam quis nostrud.

    News Card

    *Clicks through to page

    Desktop - Default

    News title goes here

    Profile Card

    *Opens modal content

    Desktop - Default

    Name Surname

    Listed Item Card

    Desktop, tablet & mobile

    Item Title

    Header menu

    Solid Bar Menu

    Transparent Menu

    Footer

    Cookies Notice

    Images

    Caption Label

    Media Embed

    Video - Media Handling & Rules

    Body text for this section will go here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non mi magna. Pellentesque lobortis tempus massa a tincidunt. Duis id dui eget ante volutpat ultrices imperdiet eu felis. Fusce imperdiet urna felis, sed rhoncus sem feugiat nec. Praesent suscipit urna a arcu aliquam congue.

    Audio - Media Handling & Rules

    Body text for this section will go here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non mi magna. Pellentesque lobortis tempus massa a tincidunt. Duis id dui eget ante volutpat ultrices imperdiet eu felis. Fusce imperdiet urna felis, sed rhoncus sem feugiat nec. Praesent suscipit urna a arcu aliquam congue.

    FOrms

    Send Message

    *This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

    Hero banner slider

    Page banner

    Elements & Rules

    Best positioned at the top of the page.

    Page headline goes here

    Jumbotron

    We create bold ideas that change behaviour

    We create bold ideas that change behaviour

    We create bold ideas that change behaviour

    Scroll

    Content highlight

    Elements & Rules

    Best positioned at the bottom of the page.

    Introduction module

    We combine strategy, technology and creativity to deliver on opportunities that make the world a healthier place.

    Explore Our Services

    Text

    One Column

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    Two Column

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Three Column

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Card listing

    Title goes here

    Name Surname

    Name Surname

    Name Surname

    Name Surname

    Name Surname

    Name Surname

    Item listing

    Title goes here

    Item Title

    Item Title

    Item Title

    Item Title

    Item Title

    Item Title

    Item Title

    Item Title

    Item Title

    Item Title

    Item Title

    Item Title

    Logo slider

    news slider

    Title goes here

    View All

    News title goes here

    News title goes here

    News title goes here

    News title goes here

    News title goes here

    Contact module

    Multi-Contact module

    Testimonial module

    Title goes here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.

    Name Surname

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.

    Name Surname 2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.

    Name Surname 3

    Multi-stats grid

    Title goes here

    100

    title goes here

    100

    title goes here

    100

    title goes here

    100

    title goes here

    100

    title goes here

    100

    title goes here

    Call-out stat

    564

    Big number description

    Gallery

    Gallery Modal

    CONTENT Modal

    Share Modal