This visual style guide has been created to show how text and media components should be used to create article pages?for the Wales.com and VisitWales.com websites. The best practice guidance below should be followed to ensure quality and?consistency?across our content.

Please also refer to the?content editorial?style guide?for tone of voice and target audience guidance and the?language and style guidance?when creating editorial content.

Standard article components

The Wales Gateway CMS uses a number of text and media content blocks or components to build articles pages. Examples are used below with some best practice guidance on how to use them.

The component build approach allows flexibility to use different combinations of components to display content in a number of ways but items marked with * are the minimum requirements for every article page published.

Metadata*

Meta page title*

This text displays in the title bar of a visitor's web browser when they view the page. It may also be used as the title of the page when a visitor bookmarks or favourites the page, or as the page title in a search engine result.

The format should always be - Page title | Sitename but the title may be made up of one?or two?parts in order to describe the page better. E.g. Insider guide to Aberystwyth | Visit Wales or Travel Wales | How To Get To Wales | Wales.com

The full title including the site name?should be?no more than 66 characters, including spaces.

Meta description*

The meta description needs to be a brief and concise summary of the page's content. It is used by search engines to display a snippet about the page in search results. The description should be?no more than 160 characters, including spaces.

H1 title*

The H1 is used by search engines to understand what the content is about, so use keywords and descriptive language. It appears on page within the colour banner, above the intro text. Aim for 20-70 characters, including spaces.

The H1 must work with the Editorial title?without duplicating it, as both appear on the article page together. It must also work together with the External text,?without duplication,?as both appear together in search results and on automated Topic pages (generated by tags).

External text*

Appears on the homepage, section pages and related article listings. Used to promote the article. Aim for 70-100 characters.

Copy should be persuasive, using a call-to-action and descriptive keywords e.g. "Discover how the green mission of Riversimple is aiming to change the way we drive."

Tags*

Keep tagging of content to a maximum of five?tags, picking the most relevant tags that describe the page.

Author profile

When articles are authored in the first person an author profile should be included. This is created separately in the CMS and is displayed within the colour banner at the top right hand side of the page.

Author profiles consist of:

  • a headshot image?- a colour, close up head, or head and shoulder shot. Where no image is available the 'Noprofileimage.jpg' should be used;
  • name?- include title only if relevant - Professor/Dr,?first and surname. Use sentence case to input but this will display on page?in caps;
  • short biog?-? a description of one or two sentences - aim for 30-40 words -? explaining who the author is, focusing on the experience or skills that make them an authoritative voice on the subject matter. Avoid duplicating the name within the biog copy.

Editorial title*

The editorial title should be intriguing, enticing and make the user want to read more but not so obscure as to confuse. It appears on page over the lead/hero image at the top of the article. Aim for 20-50 characters, including spaces. Do not use?a full stop at the end.

Intro text*

The intro text appears in the colour banner under the H1 title, at the top of the article page. It should be a standfirst for the article, setting out what the article is about. If the copy includes the name of a featured person it should be bold, but not italicised. Links cannot be included. Aim for 180-250 chars.

Theme style*

The theme style selected for the banner should compliment the hero image, picking out an accent colour, rather than using the main colour from the image.

There are 12 theme style colours to select from.?

  • Fagddu black
  • Dry slate (grey)
  • Wet slate (brownish)
  • Portmeirion Blue (light blue)
  • Penclawdd Marsh (pastel green)
  • Plynlimon Green (charged green)
  • Dolgellau Gold (orange)
  • Epynt Purple (vibrant)
  • Penrhyn Purple (deep purple)
  • Abereiddi Blue (deep blue)
  • Portdinllaen Orange (vibrant)
  • Dragon Red

Hero meta image (map)

If an article relates to one region of Wales use the relevant regional map image. The map image displays at the top right of the header banner, above the tags.

Use either the white or the black version of the map to match the colour of the title text and ensure optimised contrast for accessibility.

There is no pan-Wales map image, if your article is pan-Wales, do not include a Hero meta image.

Article content*

The main article copy displayed on the article page is 'built' using component blocks. 'Rich text' components can be supplemented with 'H2/H3 subheadings', 'Quotes', 'Google Maps' (single location pinpoint only), and embedded social media posts (Twitter and Instagram only).

Articles can use running copy, statement headings followed by explanatory para, follow a question/answer or a listing format.?Article length and formatting will depend on the type of content and article subject matter.?Refer to the?'Working with strands'?section of the?Stori Cymru Editorial?Guidance?guidance for further detail.

Maps, images, video, quotes and social embeds, should always come after a rich text block, not straight after a heading/sub-heading.

Rich text*

Text within a rich text block and make use of basic formatting including

  • bold
  • italic
  • underlining
  • bullet points

and

  1. numbered bullets
  2. xx
  3. xx

Internal and external in-line links should be added to rich text copy, using the following formats;

  • Product database - where possible, link to product pages (/product/xxxxxx)
  • Internal - link between pages by using the node (/node/xxxxxx)
  • External - link to an external site using the full url (https://xxx)

See the 'Accessibility' section of the?language and style guidance?for best practice guidance on adding in-line links to body copy.

Cymru font should only be applied to Welsh words in headings, never in body copy.

Do not use the drop cap option at the start of paragraphs.

Please refer to the?language and style guidance?to ensure consistent use of language style and formatting.

Headings: H2?headings look like this

H3?headings look like this

Always use sentence case for titles, headings and subtitles.

Use the following H2/3 convention for consistency and accessibility:

  • Use H2 for headings
  • Use H3 for any sub-headings beneath a H2 heading

Pull quotes

The 'pull quote' component can be used to highlight direct quotes in first person, or Wales voice (3rd person) articles.

Quotes should be kept short and limited to one or two?sentences. The pull quote component should be used to illustrate the article, not be part of it. Quoted text should repeat copy from the rich text in the pull quote component, not be used as part of the running copy.

The design of the quote component includes an?opening double quote mark. A closing double quote is required at the end of the quoted text. A byline should also be added for every quote.

You will also need to select a style/background colour for the quote. This should match, or complement, the theme style/colour chosen for the hero banner.

Quotes should be kept short and limited to one or two?sentences."

Google Maps

Google Maps add a 'sense of place' and are a good way to provide users with useful geographical context to an article.

Only add one map to a page as they contribute significantly to page weight and load speed.

Currently it is only possible to include a single location on a map but multiple location maps are in development.

When using a map in an article, include it either:

  • beneath the relevant items within a list, or;
  • near the start of the article / above the opening paragraph (if it relates to?the whole article).

51.5695617, -3.2880504

Embedded social media posts

Twitter or Instagram posts can be embedded in an article to add additional depth and interest, by using the URL of the individual post.

Do not include any additional embed code. The url should be in the format

Twitter: https://twitter.com/accountname/status/postid??e.g. https://twitter.com/visitwales/status/1192523378479058945

Instagram:?https://www.instagram.com/p/postid/ e.g. https://www.instagram.com/p/B4k37dWhsMw

  • Choose posts from verified or official organisation/events/product accounts; wherever possible, rather than accounts from individuals.
  • Check comments on posts to ensure they are not inappropriate;
  • Avoid using images of children where we don't have specific permission from parent/guardians;
  • Use blocks of rich text between embeds to provide space and distinction between?posts/channels.

Embedded external video

On page video is added using the External Video component. Video must be hosted on YouTube and added to the Drupal media library before it can be embedded within an article.

When embedding an external video (YouTube) in an article, include it either:

  • beneath the relevant item within a list or;
  • near the start of the article/above the opening paragraph (if it relates to the whole article).

Description text is not automatically pulled in from YouTube so should be added in the CMS. Aim for 70-100 characters including spaces and use an end stop.

The?descriptive caption appears here. Aim for 70-100 characters including spaces and an end stop.

Images*

Images are extremely important to our content. We aim to 'show' rather than tell with both words and images and video.

All images must comply with the?Wales Brand Photography Guidelines?and?be delivered to the image support team, along with metadata, copyright clearance and model release forms,?to be stored and indexed on the Cymru Wales Digital Asset Library,?before they can be used in web articles.

Articles require a strong, high quality, ‘hero’ image (hero image) that will be displayed at the top of the article, along with supporting imagery for the body copy.?The hero image will be displayed on a section page/homepage, along with the editorial title and external text copy, to showcase the article on section pages and in search results, so should demonstrate the essence of what the article is about.

Images for use on the website must be;

  • Minimum of 1920px (width or height, depending on orientation)
  • Maximum file size is 4mb, aim for under 2mb to reduce page weight and load time.

Articles should include a minimum of three?supporting image – ideally more, distributed throughout the article copy to illustrate the ‘story’ adding interest and additional depth to the copy.

Don't use dated photography as this will quickly lower the quality of the article.

Ensure the best focal point has been selected, using the focal point selector tool within the CMS,?to ensure the best view of the image on all screen sizes.?

Use a good mix of single, portrait, landscape and full bleed where appropriate. There are 10 different?image display styles, an example of each can be seen below.

Image display styles

Tu-Hwnt-I'r Bont tea room during autumn
This is -??'1 image - 16:9 - Large, full bleed'?
Tu-Hwnt-I'r Bont tea room during autumn
This is - '1 image - Thin -Large, full bleed'
Tu-Hwnt-I'r Bont tea room during autumn
This is - '1 image - 16:9?- Medium size'
Tu-Hwnt-I'r Bont tea room during autumn
This is - '1 image - 4:3?- Medium size'
Tu-Hwnt-I'r Bont tea room during autumn
This is - '1 image - 16:9?- Small?size'
Tu-Hwnt-I'r Bont tea room during autumn
This is - '1 image - 4:3?- Small?size'
Tu-Hwnt-I'r Bont tea room during autumn
Brecon Beacons Reservoir
This is - '2?images - Portrait'
Tu-Hwnt-I'r Bont tea room during autumn
Brecon Beacons Reservoir
This is - '2?images - Landscape'
Tu-Hwnt-I'r Bont tea room during autumn
Brecon Beacons Reservoir
castle lit up at night with reflection on water
This is - '3?images - Portrait'

Image credit information*

All Cymru Wales owned images should use a bilingual credit in the following format:

? Hawlfraint y Goron / Crown Copyright

Third party images should use the following format -

? followed by the name of the copyright owner

Where required photographers should be credited before the copyright owner -

Photographer name / ? name of the copyright owner

    Media asset captions / descriptions*

    All images must have alt text descriptions for accessibility.

    A descriptive caption that will appear on page is also required for both images and embedded YouTube video. Include location wherever?possible to provide context and a sense of place.

    Related content

    In-line links to related content?should be included within the rich text copy of the article?wherever relevant but particularly at the end, in order to guide users to more of our content, or to an an external site if relevant.

    E.g. Find out more about the highlights and adventures along The Coastal Way.

    Visit AdventureSmart UK?for information on how to stay safe whilst exploring Wales.

    Related articles component

    The 'Related stories' block, which appears at the bottom of all article pages, is automatically?populated with internal/same site articles?with the same topic tags. The auto population can be overwritten with editorially selected articles using the?'Related articles' component.

    A maximum of four articles can be selected and should be added in the following logical and consistent order:

    • most relevant internal/same site articles;
    • most relevant internal-sister site?articles;
    • most relevant external site articles.

    Avoid repeating links from the body text in an editorial selection.

    Where less than four?articles are editorially selected the remaining spaces?will automatically populate with internal/same site articles?with the?same topic tags.

    Related stories

    Language and style guidance

    Guidance on house style and use of language mechanics to help content producers create clear and consistent content.