Molecules
content header
Note - October 2019: These examples have been updated to reflect the difference between an article content header and a case study template header.
The case study content header needs to be applied to the integrated templates.
Article examples
Default variant
Example category title
Bepategun goj tefuzma med zuf rebebi jopo siga.
Plain variant
The class "sv--plain" sets the background colour to white.
Example category title
Ojvaswil jatruf hatuli vun tescawub tahita mo cide.
Image variant
When using an image the class modified "sv--dark" will be added to the "sv-content-header" element.
Note - November 2019: I have made a limited attempt to fix this molecule so that the image covers the entire area if
object-fit: coveris supported. In IE11 the height of the image will stretch to fill the height of the content header and the width will scale. It may be that in time a more thorough solution is required.
Vuture have attempted to fix this either through increasing the width of the images to be large e.g. "width: 122%" or applying "object-fit: cover" to the image.
Example category title
Bo notek vouj jueroin joowupat bego titasoceb kesura.
French example
Savills accompagne La Française REM pour l’installation de Five Guys à Châtelet
Nouveautés de Savills
Savills accompagne La Française REM pour l’installation de Five Guys à Châtelet
Case Study examples
Default variant
WEB-1245 Change the Case Study template was due to modify the content header but this has not been implemented, at least on the UK country site. Here is an exmaple: Case Study without the design change .
Note - October 2019: Vuture need to add the class "sv--case-study" to the "sv-content-header" element for the correct styles to be applied.