Page Loading

Callout box

Use this callout box to highlight important information on the page. It may be used to highlight something that’s not directly related to the page content.  

Callout box example

Trading with Russia or Ukraine

Find the latest guidance on Russia sanctions for businesses in Scotland on the Find Business Support website.

You can also get up-to-date advice on trading with Russia or Ukraine and links to further support.

Find out more opens in a new window  

Business development and advice

Need support to take your business where you want it to be? Our specialist advisers can help you overcome day-to-day challenges, enhance your business practices or explore new markets and opportunities to grow and scale your company.

Learn more about our business development support  

Thanks for submitting your application

Applications take up to 3 weeks to process. Someone may be in touch in the meantime to ask for additional information or clarifications on the information you've provided. 

How to use a callout box

The callout box component can contain a:

  • Headline
  • Paragraph
  • Button
  • Link / Link CTA
  • Icon

It should not contain more complex content like video or accordion.  

Only use this component once on a page. The callout panel can be used to highlight:

  • A change or update that users may not be aware of  
  • Topical information or another relevant service that you think users are likely to be looking for  
  • Legal information or time-sensitive information that users need to be aware of
  • A CTA 
  • Other important information 

On pages that use a left hand navigation, a callout box with a background will look the same as a standard panel with a background. We recommend using the border style on pages with left hand navigation. 

Adding a callout box in the CMS

Using a template

You can use the 'Prominent CTA Callout box' or 'Prominent CTA grey block' templates for this component. On pages that use left hand navigation, you'll need to remove the 8 span from the container. 

From scratch

To create this panel style from scratch:

  1. Add a container to a panel
  2. Set the container to a span of 8 and either give it a border or background colour
  3. Add the components you need into the container

Using a template

You can use the 'Prominent CTA Callout box' or 'Prominent CTA grey block' templates for this component. 

From scratch

To create this panel style from scratch:

  1. Set the panel span to 8 and add a container
  2. Give the container a border or background colour
  3. Add the components you need into the container

Callout box modifier rules

Panel modifiers

  • Background: default (white)
  • Grid span: default as standard, 8 on SDI
  • Padding: Default, unless required to improve layout  
  • Alignment: default
  • Border: none 

Container modifiers

  • Background: default (white) or ‘background’ (grey). ‘Success’ or ‘warning’ may be used if the callout box is being used for these purposes
  • Grid span: 8 as standard (removed on pages with left hand nav), default on SDI
  • Padding: medium, all devices
  • Alignment: default
  • Border: md 

Accessibility

In the future, we will be looking at how we use section tags for components. This component would sit within an <aside> tag. This element is used to identify content that is related to the primary content on the page. 

Evidence and research

When this component was added to a page users liked that the information was clear and easy to read. 

Full width examples

Here's how a callout box should look as standard

This covers most of our sites, including SE and FBS. It's aligned to the left of the page, with a span of 8. We do this by applying the span to the container rather than the panel.

Here's how a callout box should look on SDI

It's aligned to the centre of the page (but still left-justified) with a span of 8. We do this by applying the span to the panel rather than the container.