• Taxonomic name: T-ACCENT
  • Added on: v3.0.0 (15/09/17)
  • Updated on: v5.0.0 (05/10/20)

Accent colours

Accent colours can be added to a page either as full width bars or on cards.

Design and usage

  • A white or light grey area should only ever be applied on top of a dark accent colour
  • Nesting of dark and light accent colours should be maximum of one level deep

Examples

Interactive example

Code example

<div class="t-accent-[variant] t-accent-[variant]--[colour] t-card-accent-[variant] t-card-accent-[variant]--[colour]">
		<div class="l-content-container">
			<ul class="a-list-plain l-columns [ Modifiers ]">
				<!---Automatically pick up colour of card-->
				<li class="l-columns__column m-card">...</li>
				<!---Set colour of card-->
				<li class="l-columns__column m-card t-accent-[variant] t-accent-[variant]--[colour]">...</li>
			</ul>
		</div>
	</div>
</div>

Development and test

Notes for developers

When applying background colour and standard card colour, you must apply both the t-accent-[variant] and t-card-accent-[variant] classes to the l-section container.

t-card-accent-[variant] should only be used if absolutely nessessary. If at all possible set the accent colour for each card individually to provide better control of the colours being used on the page. It is not possible to override the colour of a card if set using t-card-accent-[variant].

Pay carefull attention to the documentation for a specific component to see if can not be used on particular accent colours (particularly dark accent colours).

Classes overview

The following table gives you a quick overview of the CSS classes that can be applied.

The colour names and hex values noted below are as defined in the colour style guide page.

Abeille Assurances default

Class Outcome Required Applied to Comments
.t-accent-light Base class for a element with light background to ensure the text and icon colours are correctly applied Yes .l-section, .m-card  
.t-card-accent-light Base class for a element with light background to ensure the text and icon colours are correctly applied to standard cards Yes .l-section, .m-card  
.t-accent-dark Base class for a element with dark background to ensure the text and icon colours are correctly applied Yes .l-section, .m-card  
.t-card-accent-dark Base class for a element with dark background to ensure the text and icon colours are correctly applied to standard cards Yes .l-section, .m-card  
.t-accent-light--1 Variant to make background White (#fff)   .t-accent-light
.t-card-accent-light--1 Variant to make standard card background White (#fff)   .t-card-accent-light
.t-accent-light--2 Variant to make background Light Grey (#f9f9f9)   .t-accent-light
.t-card-accent-light--2 Variant to make standard card background Light Grey (#f9f9f9)   .t-card-accent-light
.t-accent-light--3 Variant to make background Base Grey (#eee)   .t-accent-light
.t-card-accent-light--3 Variant to make standard card background Base Grey (#eee)   .t-card-accent-light
.t-accent-light--4 Variant to make background Base Blue (#e5edf8)   .t-accent-light
.t-card-accent-light--4 Variant to make standard card background Base Blue (#e5edf8)   .t-card-accent-light
.t-accent-light--5 Variant to make background Abeille Assurances Yellow (#ffd900)   .t-accent-light
.t-card-accent-light--5 Variant to make standard card background Abeille Assurances Yellow (#ffd900)   .t-card-accent-light
.t-accent-dark--1
.t-accent-dark--2 		Variant to make background Abeille Assurances Blue (#004fb6)   .t-accent-dark
.t-card-accent-dark--1
.t-card-accent-dark--2 		Variant to make standard card background Abeille Assurances Blue (#004fb6)   .t-card-accent-dark
.t-accent-dark--3 Variant to make background Bottle Green (#002f14)   .t-accent-dark
.t-card-accent-dark--3 Variant to make standard card background Bottle Green (#002f14)   .t-card-accent-dark
.t-accent-dark--4 Variant to make background Warm Grey (#5c596d)   .t-accent-dark
.t-card-accent-dark--4 Variant to make standard card background Warm Grey (#5c596d)   .t-card-accent-dark
.t-accent-dark--5
.t-accent-dark--6 		Variant to make background Plum (#4e1758)   .t-accent-dark
.t-card-accent-dark--5
.t-card-accent-dark--6 		Variant to make standard card background Plum (#4e1758)   .t-card-accent-dark
.t-accent-dark--7 Variant to make background Dark Teal (#005a6c)   .t-accent-dark
.t-card-accent-dark--7 Variant to make standard card background Dark Teal (#005a6c)   .t-card-accent-dark
.t-accent-dark--8 Variant to make background Dark Grey (#444)   .t-accent-dark
.t-card-accent-dark--8 Variant to make standard card background Dark Grey (#444)   .t-card-accent-dark

Abeille Assurances 2021

Class Outcome Required Applied to Comments
.t-accent-light Base class for a element with light background to ensure the text and icon colours are correctly applied Yes .l-section, .m-card  
.t-card-accent-light Base class for a element with light background to ensure the text and icon colours are correctly applied to standard cards Yes .l-section, .m-card  
.t-accent-dark Base class for a element with dark background to ensure the text and icon colours are correctly applied Yes .l-section, .m-card  
.t-card-accent-dark Base class for a element with dark background to ensure the text and icon colours are correctly applied to standard cards Yes .l-section, .m-card  
.t-accent-light--1 Variant to make background White (#fff)   .t-accent-light
.t-card-accent-light--1 Variant to make standard card background White (#fff)   .t-card-accent-light
.t-accent-light--2 Variant to make background Lightest Grey (#f9f9f9)   .t-accent-light
.t-card-accent-light--2 Variant to make standard card background Lightest Grey (#f9f9f9)   .t-card-accent-light
.t-accent-light--3 Variant to make background Light Grey (#eee)   .t-accent-light
.t-card-accent-light--3 Variant to make standard card background Light Grey (#eee)   .t-card-accent-light
.t-accent-light--4 Variant to make background Lightest Blue (#e5edf8)   .t-accent-light
.t-card-accent-light--4 Variant to make standard card background Lightest Blue (#e5edf8)   .t-card-accent-light
.t-accent-light--5 Variant to make background Abeille Assurances Yellow (#ffd900)   .t-accent-light
.t-card-accent-light--5 Variant to make standard card background Abeille Assurances Yellow (#ffd900)   .t-card-accent-light
.t-accent-light--6 Variant to make background Teal (#39a9ad)   .t-accent-light
.t-card-accent-light--6 Variant to make standard card background Teal (#39a9ad)   .t-card-accent-light
.t-accent-dark--1
.t-accent-dark--2 		Variant to make background Abeille Assurances Blue (#004fb6)   .t-accent-dark
.t-card-accent-dark--1
.t-card-accent-dark--2 		Variant to make standard card background Abeille Assurances Blue (#004fb6)   .t-card-accent-dark
.t-accent-dark--3
.t-accent-dark--4 		Variant to make background Dark Teal (#005a6c)   .t-accent-dark
.t-card-accent-dark--3
.t-card-accent-dark--4 		Variant to make standard card background Dark Teal (#005a6c)   .t-card-accent-dark
.t-accent-dark--5
.t-accent-dark--6 		Variant to make background Rich Purple (#370046)   .t-accent-dark
.t-card-accent-dark--5
.t-card-accent-dark--6 		Variant to make standard card background Rich Purple (#370046)   .t-card-accent-dark
.t-accent-dark--7 Variant to make background Dark Teal (#005a6c)   .t-accent-dark
.t-card-accent-dark--7 Variant to make standard card background Dark Teal (#005a6c)   .t-card-accent-dark
.t-accent-dark--8 Variant to make background Charcoal (#191919)   .t-accent-dark
.t-card-accent-dark--8 Variant to make standard card background Charcoal (#191919)   .t-card-accent-dark

Abeille Assurances legacy

Class Outcome Required Applied to Comments
.t-accent-light Base class for a element with light background to ensure the text and icon colours are correctly applied Yes .l-section, .m-card  
.t-card-accent-light Base class for a element with light background to ensure the text and icon colours are correctly applied to standard cards Yes .l-section, .m-card  
.t-accent-dark Base class for a element with dark background to ensure the text and icon colours are correctly applied Yes .l-section, .m-card  
.t-card-accent-dark Base class for a element with dark background to ensure the text and icon colours are correctly applied to standard cards Yes .l-section, .m-card  
.t-accent-light--1 Variant to make background White (#fff)   .t-accent-light
.t-card-accent-light--1 Variant to make standard card background White (#fff)   .t-card-accent-light
.t-accent-light--2 Variant to make background Lightest Grey (#f9f9f9)   .t-accent-light
.t-card-accent-light--2 Variant to make standard card background Lightest Grey (#f9f9f9)   .t-card-accent-light
.t-accent-light--3 Variant to make background Light Grey (#eee)   .t-accent-light
.t-card-accent-light--3 Variant to make standard card background Light Grey (#eee)   .t-card-accent-light
.t-accent-light--4 Variant to make background Lightest Blue (#e5edf8)   .t-accent-light
.t-card-accent-light--4 Variant to make standard card background Lightest Blue (#e5edf8)   .t-card-accent-light
.t-accent-light--5 Variant to make background Abeille Assurances Yellow (#ffd900)   .t-accent-light
.t-card-accent-light--5 Variant to make standard card background Abeille Assurances Yellow (#ffd900)   .t-card-accent-light
.t-accent-dark--1 Variant to make background Light Blue (#1a61bd)   .t-accent-dark
.t-card-accent-dark--1 Variant to make standard card background Light Blue (#1a61bd)   .t-card-accent-dark
.t-accent-dark--2 Variant to make background Dark Blue (#001647)   .t-accent-dark
.t-card-accent-dark--2 Variant to make standard card background Dark Blue (#001647)   .t-card-accent-dark
.t-accent-dark--3 Variant to make background Dark Green (#0e573f)   .t-accent-dark
.t-card-accent-dark--3 Variant to make standard card background Dark Green (#0e573f)   .t-card-accent-dark
.t-accent-dark--4 Variant to make background Light Purple (#87378e)   .t-accent-dark
.t-card-accent-dark--4 Variant to make standard card background Light Purple (#87378e)   .t-card-accent-dark
.t-accent-dark--5 Variant to make background Dark Purple (#421b67)   .t-accent-dark
.t-card-accent-dark--5 Variant to make standard card background Dark Purple (#421b67)   .t-card-accent-dark
.t-accent-dark--6 Variant to make background Pink (#c01b83)   .t-accent-dark
.t-card-accent-dark--6 Variant to make standard card background Pink (#c01b83)   .t-card-accent-dark
.t-accent-dark--7 Variant to make background Teal (#00788a)   .t-accent-dark
.t-card-accent-dark--7 Variant to make standard card background Teal (#00788a)   .t-card-accent-dark
.t-accent-dark--8 Variant to make background Dark Grey (#413e45)   .t-accent-dark
.t-card-accent-dark--8 Variant to make standard card background Dark Grey (#413e45)   .t-card-accent-dark

B2B (legacy)

Class Outcome Required Applied to Comments
.t-accent-light Base class for a element with light background to ensure the text and icon colours are correctly applied Yes .l-section, .m-card  
.t-card-accent-light Base class for a element with light background to ensure the text and icon colours are correctly applied to standard cards Yes .l-section, .m-card  
.t-accent-dark Base class for a element with dark background to ensure the text and icon colours are correctly applied Yes .l-section, .m-card  
.t-card-accent-dark Base class for a element with dark background to ensure the text and icon colours are correctly applied to standard cards Yes .l-section, .m-card  
.t-accent-light--1 Variant to make background White (#fff)   .t-accent-light
.t-card-accent-light--1 Variant to make standard card background White (#fff)   .t-card-accent-light
.t-accent-light--2 Variant to make background Lightest Grey (#f9f9f9)   .t-accent-light
.t-card-accent-light--2 Variant to make standard card background Lightest Grey (#f9f9f9)   .t-card-accent-light
.t-accent-light--3 Variant to make background Light Grey (#eee)   .t-accent-light
.t-card-accent-light--3 Variant to make standard card background Light Grey (#eee)   .t-card-accent-light
.t-accent-light--4 Variant to make background Lightest Blue (#e5edf8)   .t-accent-light
.t-card-accent-light--4 Variant to make standard card background Lightest Blue (#e5edf8)   .t-card-accent-light
.t-accent-light--5 Variant to make background Abeille Assurances Yellow (#ffd900)   .t-accent-light
.t-card-accent-light--5 Variant to make standard card background Abeille Assurances Yellow (#ffd900)   .t-card-accent-light
.t-accent-dark--1 Variant to make background Light Blue (#1a61bd)   .t-accent-dark
.t-card-accent-dark--1 Variant to make standard card background Light Blue (#1a61bd)   .t-card-accent-dark
.t-accent-dark--2 Variant to make background Dark Blue (#001647)   .t-accent-dark
.t-card-accent-dark--2 Variant to make standard card background Dark Blue (#001647)   .t-card-accent-dark
.t-accent-dark--3 Variant to make background Dark Green (#0e573f)   .t-accent-dark
.t-card-accent-dark--3 Variant to make standard card background Dark Green (#0e573f)   .t-card-accent-dark
.t-accent-dark--4 Variant to make background Boston Blue (#3c445e)   .t-accent-dark
.t-card-accent-dark--4 Variant to make standard card background Boston Blue (#3c445e)   .t-card-accent-dark
.t-accent-dark--5 Variant to make background Oxford Blue (#636d81)   .t-accent-dark
.t-card-accent-dark--5 Variant to make standard card background Oxford Blue (#636d81)   .t-card-accent-dark
.t-accent-dark--6 Variant to make background Pink (#c01b83)   .t-accent-dark
.t-card-accent-dark--6 Variant to make standard card background Pink (#c01b83)   .t-card-accent-dark
.t-accent-dark--7 Variant to make background Teal (#00788a)   .t-accent-dark
.t-card-accent-dark--7 Variant to make standard card background Teal (#00788a)   .t-card-accent-dark
.t-accent-dark--8 Variant to make background Dark Grey (#413e45)   .t-accent-dark
.t-card-accent-dark--8 Variant to make standard card background Dark Grey (#413e45)   .t-card-accent-dark

Business (legacy)

Class Outcome Required Applied to Comments
.t-accent-light Base class for a element with light background to ensure the text and icon colours are correctly applied Yes .l-section, .m-card  
.t-card-accent-light Base class for a element with light background to ensure the text and icon colours are correctly applied to standard cards Yes .l-section, .m-card  
.t-accent-dark Base class for a element with dark background to ensure the text and icon colours are correctly applied Yes .l-section, .m-card  
.t-card-accent-dark Base class for a element with dark background to ensure the text and icon colours are correctly applied to standard cards Yes .l-section, .m-card  
.t-accent-light--1 Variant to make background White (#fff)   .t-accent-light
.t-card-accent-light--1 Variant to make standard card background White (#fff)   .t-card-accent-light
.t-accent-light--2 Variant to make background Lightest Grey (#f9f9f9)   .t-accent-light
.t-card-accent-light--2 Variant to make standard card background Lightest Grey (#f9f9f9)   .t-card-accent-light
.t-accent-light--3 Variant to make background Light Grey (#eee)   .t-accent-light
.t-card-accent-light--3 Variant to make standard card background Light Grey (#eee)   .t-card-accent-light
.t-accent-light--4 Variant to make background Lightest Blue (#e5edf8)   .t-accent-light
.t-card-accent-light--4 Variant to make standard card background Lightest Blue (#e5edf8)   .t-card-accent-light
.t-accent-light--5 Variant to make background Abeille Assurances Yellow (#ffd900)   .t-accent-light
.t-card-accent-light--5 Variant to make standard card background Abeille Assurances Yellow (#ffd900)   .t-card-accent-light
.t-accent-dark--1 Variant to make background Light Blue (#1a61bd)   .t-accent-dark
.t-card-accent-dark--1 Variant to make standard card background Light Blue (#1a61bd)   .t-card-accent-dark
.t-accent-dark--2 Variant to make background Dark Blue (#001647)   .t-accent-dark
.t-card-accent-dark--2 Variant to make standard card background Dark Blue (#001647)   .t-card-accent-dark
.t-accent-dark--3 Variant to make background Dark Green (#0e573f)   .t-accent-dark
.t-card-accent-dark--3 Variant to make standard card background Dark Green (#0e573f)   .t-card-accent-dark
.t-accent-dark--4 Variant to make background Light Purple (#87378e)   .t-accent-dark
.t-card-accent-dark--4 Variant to make standard card background Light Purple (#87378e)   .t-card-accent-dark
.t-accent-dark--5 Variant to make background Dark Purple (#421b67)   .t-accent-dark
.t-card-accent-dark--5 Variant to make standard card background Dark Purple (#421b67)   .t-card-accent-dark
.t-accent-dark--6 Variant to make background Raven Black (#333)   .t-accent-dark
.t-card-accent-dark--6 Variant to make standard card background Raven Black (#333)   .t-card-accent-dark
.t-accent-dark--7 Variant to make background Teal (#00788a)   .t-accent-dark
.t-card-accent-dark--7 Variant to make standard card background Teal (#00788a)   .t-card-accent-dark
.t-accent-dark--8 Variant to make background Dark Grey (#413e45)   .t-accent-dark
.t-card-accent-dark--8 Variant to make standard card background Dark Grey (#413e45)   .t-card-accent-dark

Component releases

  • Added on: v3.0.0 (15/09/17)
  • Updated on: v5.0.0 (05/10/20)

Latest update:

  • updated: Class names for the t-accent-light-- and t-accent-dark-- modifiers have changed to aid in theming the Framework, while the colour values themselves have also been changed to reflect the new colour palette in the recently updated Brand Guidelines. The colours used within the Abeille Assurances Legacy theme were the the original default colours prior to v5.0.0, and are the ones names in the class list table below. The reduced number of colours means that some of the new colours are used more than once; this is to ensure that all of the old colours is mapped to the best new equivalent in order to prevent any jarring colour combinations being accidentally produced when switching FW versions.

Full version history

A full history of changes and enhancements detailing all minor and major updates to the component.

View full version history

Want something new in Framework, or to chat about an issue you're having with it?

Contact the team