Page Loading

Paragraph text

Paragraph text can be used to create a block of text on a page. It can also be used within other components. 

Paragraph text example

Your greatest asset is the talent within your organisation. As you reflect on your new business and operating environment, consider how your people impact these and how you can make better use of the skills, knowledge and capability of your entire workforce.

Maximising your people resources through a positive and supportive working environment will reduce staff turnover and sickness absence while improving productivity, innovation and engagement.

See the end of this page for more detailed examples of how paragraph text should appear on different sites and with different components.

How to use paragraph text

Paragraph text should be used to provide information in text format. The text component includes a rich text editor, allowing you to add different formatting like bullet lists or numbered lists, create headings, add links and add basic tables.

Paragraph text can be used on its own on a page or within other components – for example, within cards, components, inset text, accordions or 50:50 panels.  

You can add a background if required, or leave it with no background.

When writing text, you should always follow our content style guidelines as well as our guidelines for writing accessible content. 

Adding paragraph text in the CMS

Paragraph text modifier rules

These rules only apply to a block of text on its own, not to text that appears within other components. 

  • Background: default, white (‘none’) or grey (‘background’) 
  • Grid span: 8 
    • Standard - applied at container level. Span removed on pages with left hand navigation
    • SDI - applied at panel level
  • Padding: default, unless required to improve layout  
  • Alignment: default 

Accessibility

Paragraph text should span 8 columns or less, as this keeps each line shorter and makes it easier to read.

If you’re adding headings to your paragraph text, remember to format them as a heading so that they’re marked up correctly for screen readers. Don't just use bold text to indicate a heading. 

Use other components to break up large chunks of text. This makes the page easier to scan and feel less overwhelming.  

Here's how paragraph text should look as standard

This applies to most of our sites, including Scottish Enterprise and Find Business Support, but not SDI.

When paragraph text appears on its own in a panel as a block of text, it should be left-justified and sit on the left side of the page. Applying an 8 span to the container rather than the panel gives this effect.

However, if your paragraph text appears within another component or component panel (like a card or card panel), you should follow the guidelines for that component. 

Here's how paragraph text should be added above a card panel

It's left aligned, because the card component is left aligned. However, it should still have a span of 8 to make sure it's readable and accessible. 

Here's how a paragraph text looks with a stats component

Here, the text is centre justified and centre aligned, following the guidelines for that component. It should still have a span of 8, to make sure it's readable and accessible.

  • Stat heading

  • Stat heading

  • Stat heading

Here's how paragraph text looks on the SDI website

The text still left-justified, but the 8 span on the panel means it sits in the centre columns of the page. This is how it should look for a simple block of text.

Always follow the guidelines for the component the text appears in first. The next examples show how paragraph text can look different in different component panels.

Here's how paragraph text looks on a card panel

It's left aligned, because the card component is left aligned - even though it appears on the SDI site.

Here's how paragraph text looks with a stats component

Here, the text is centre justified and centre aligned, following the guidelines for that component. 

  • Stat heading

  • Stat heading

  • Stat heading