Look and feel implementation guide for creators of third-party Birmingham City Council websites

Guidance

From time to time third-party suppliers need to create a website or online service which matches the look and feel of this website as closely as possible. The purpose of this page is to give you enough guidance to do that as best you can.

First of all, our core .css stylesheet is at orbit.css - however, rather than downloading it and making a local copy, it is better to include this directive at the top of your own .css style sheet:

@import url("https://www.birmingham.gov.uk/site/dist/orbit.css");

The relevant structural .css classes are:

  • .site-header for the full site header, including masthead and search bar
  • .site-header__main-content for the masthead area
  • .site-search .form .form--search for the search bar
  • .site-main for the main content wrapper
  • .container to constrain the site to a certain width and provide margins either side of that width
  • .page-primary for the left hand navigational components
  • .page-content for the main content wrapper
  • .site-social-bar for the social media links part of the footer
  • .site-footer for the main footer

Ideally, logos and other monochrome image assets will be served as .svg scalable vector graphics files.

For more detailed guidance for specific implementations, contact us.

Feedback button