This website will offer limited functionality in this browser. We only support the recent versions of major browsers like Chrome, Firefox, Safari, and Edge.

Technology Collaboration Programme by IEA

Enter your search

FE Styleguide..

Primary Colours

Primary $brand-green #34BF79

Uses

  • Buttons
  • Background colour
Light green $brand-green-light #D7ECE2

Uses

  • Cards
  • Background colour
Dark green $brand-green-dark #157557

Uses

  • Buttons
  • Background colour
$brand-black #000

Uses

  • Fonts
$brand-white #fff

Uses

  • Fonts
  • Background colour

Secondary Colours

Secondary $brand-yellow #FFE35A

Uses

  • Highlights/Secondary
  • buttons
$brand-yellow-light #FDF5CA

Uses

  • Inactive buttons
$brand-blue #95CEDB

Uses

  • tags
$brand-blue-light #DAEEF3

Uses

  • backgrounds
$brand-grey #F7F7F7

Uses

  • backgrounds
$brand-red $brand-invalid #AB1A1A

Uses

  • Forms
$brand-red-light #F7F7F7

Uses

  • Forms

Text Styles

Base Value: 16

Heading 1

  • Family: Fieldwork
  • Weight: Geo DemiBold (600)
  • Size: 49px
  • Line Height: 120%

Heading 1

Heading 2

  • Family: Fieldwork
  • Weight: Geo DemiBold (600)
  • Size: 39px
  • Line Height: 120%

Heading 2

Heading 3

  • Family: Fieldwork
  • Weight: Geo DemiBold (600)
  • Size: 31px
  • Line Height: 120%

Heading 3

Heading 4

  • Family: Fieldwork
  • Weight: Geo DemiBold (600)
  • Size: 25px
  • Line Height: 120%

Heading 4

Heading 5

  • Family: Fieldwork
  • Weight: Geo DemiBold (600)
  • Size: 20px
  • Line Height: 120%
Heading 5

Heading 6

  • Family: Fieldwork
  • Weight: Bold (700)
  • Size: 18px
  • Line Height: 120%
Heading 6

Paragraph

  • Family: Manrope
  • Weight: Regular (400)
  • Size: 16px
  • Line Height: 120%

Paragraph

Meta / Small

  • Family: Fieldwork
  • Weight: Regular (400)
  • Size: 14px
  • Line Height: 120%

Paragraph

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5
Heading h6

Id viverra id nunc, nulla non penatibus facilisis non sed. Morbi fusce risus facilisis tincidunt diam sit nulla sapien. Sit felis interdum et, commodo diam urna sed urna. Odio pulvinar duis pharetra malesuada congue auctor molestie. Mauris praesent nulla netus scelerisque lorem. Tortor pulvinar molestie pharetra feugiat mauris congue mattis bibendum sapien. Semper in rhoncus sed in. Aliquam augue porttitor amet donec posuere netus bibendum.

Bold , Italic, link

  • Molestie in sem dictum lorem massa
  • Maecenas lectus est pretium integer in eu. Feugiat aliquam justo, non luctus pulvinar lobortis. Tincidunt aliquam cursus.
  • Dolor eros et id dui

Flexible content section with background colour.

Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque si Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu era.

  • Unordered list item
  • List item
  • Unordered list item with more text to see how it wraps. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue praesent dapibus, neque id cursus faucibus, tortor neque egestas augue
  • Another unordered list item
  • Another list item

Donec eu libero sit amet quam semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque si Ut felis.

  1. Ordered list item 1
  2. List item
  3. Ordered list item with more text to see how it wraps. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue praesent dapibus, neque id cursus faucibus, tortor neque egestas augue
  4. Another Ordered list item
  5. Another list item

Donec eu libero sit amet quam. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque si Ut felis. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque si Ut felis.

Blockquote example aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque si Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu era.

-Author Name, Publication Name
Month Savings Another Column
January £100 More information
February £200 More information
March £300 More information

Button and link examples

Primary Button

Button primary icon for external link Button primary external link icon for external link Button primary download
Button primary with a very very long text for test it and test the align
Button primary external link with a very very long text for test it and test the align icon for external link

Secondary Button

Button Secondary. icon for external link Button Secondary external link icon for external link Button Secondary download

Filter and anchor Button

filter link anchor link

Arrow Button (basic)

Button basic icon for external link Button basic external link icon for external link

Category buttons

btn-tag btn-tag btn-tag--green-dark btn-tag btn-tag--blue btn-tag btn-tag--yellow btn-tag btn-tag--green-light btn-tag btn-tag--green-light

member-buttons

btn-tag btn-tag--member-unlock btn-tag btn-tag--member-unlock no link btn-tag--member-lock no link btn-tag btn-tag--member-unlock

Components

Component .info-line

  • 8-10th August 2023
  • £260
  • Hybrid

Component .info-list

test 01

test 01

Social list

Card examples

Cards publicatons

Subjet

Example without lock

  • 17 May 2020
  • Category

1 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 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Read more

Members Only

Card events

Subject
  • 8-10th August 2023
  • £260
  • Hybrid

Lorem ipsum dolor sit amet consectetur adipiscing elit

1 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 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Button basic icon for external link
Subject
  • 8-10th August 2023
  • £260
  • Hybrid

Lorem ipsum dolor sit amet consectetur adipiscing elit Lorem ipsum dolor sit amet consectetur adipiscing elit Lorem ipsum dolor sit amet consectetur adipiscing elit Lorem ipsum dolor sit amet consectetur adipiscing elit Lorem ipsum dolor sit amet consectetur adipiscing elit

1 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 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Button basic icon for external link

Card news

Card news when block bg is not white

Card main

Lorem ipsum dolor sit amet consectetur adipiscing..

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

Button primary stretched

Lorem ipsum dolor sit amet consectetur adipiscing..

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

Button primary stretched

Card main with icon

Lorem ipsum dolor sit amet consectetur adipiscing.

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

Button primary stretched

Lorem ipsum dolor sit amet consectetur adipiscing.

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

Button primary stretched

Card main with image 1 and 2 column

Worker using a tablet

Lorem ipsum dolor sit amet consectetur adipiscing.

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

Button primary stretched

Card grid 2 columns

Worker using a tablet

Lorem ipsum dolor sit amet consectetur adipiscing.

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

Button primary stretched
Worker using a tablet

Lorem ipsum dolor sit amet consectetur adipiscing.

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

Button primary stretched

Card main with image 3

Worker using a tablet

Lorem ipsum dolor sit amet consectetur adipiscing.

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

Button primary stretched
Worker using a tablet

Lorem ipsum dolor sit amet consectetur adipiscing.

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

Button primary stretched
Worker using a tablet

Lorem ipsum dolor sit amet consectetur adipiscing.

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

Button primary stretched

Card main with image 4

Worker using a tablet

Lorem ipsum dolor sit amet consectetur adipiscing.

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

Button primary stretched
Worker using a tablet

Lorem ipsum dolor sit amet consectetur adipiscing.

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

Button primary stretched
Worker using a tablet

Lorem ipsum dolor sit amet consectetur adipiscing.

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

Button primary stretched
Worker using a tablet

Lorem ipsum dolor sit amet consectetur adipiscing.

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

Button primary stretched

Example GF styles

Form field examples

Icomoon icon

  • .icon-search
  • .icon-cross-2