Skip to Content

ARTICLE

Presenting articles

“Articles” is the new naming convention we use for what - in the previous website - we called “blogposts”. They are deep-dives into topics that are introduced in industry pages or application pages. Please find below instructions on how to build articles pages and concrete examples.

Hero

Mandatory header elements:

  1. Page label
  2. Title: keep it catchy and short, ideally max. 3 lines
  3. Subtitle: it should be a teaser, max. within 2 lines. 
  4. Reading time
  5. Share button (top)
  6. Hero image

If available, then the following elements should be provided:

  1. Additional page label
  2. Author
  3. Listen button
  4. Favorite button (top)

Do you have an author? More authors? Below 4 different behaviors:

Body

Components for the article body, mix and match according to need

  1. Introduction: keep the intro paragraph short and compact as well
  2. Gallery: for more than 2 images right next to/below each other. Additional note, use expressive and friendly images that match the content
  3. Headline + text: add headlines between the paragraphs to break it up for better readability
  4. Two column CTA (background can be changed to promote the CTA)
  5. Two column headline + text + image: use expressive and friendly images that match the content
  6. Testimonial
  7. Checkmark box (for insights/facts/etc)
  8. Share and favorite button
  9. Product ribbon
  10. 50-50 module (strongly recommended to increase your most important conversion!) to highlight the most important CTA of the page (e.g., a link to a whitepaper to download) 
  11. Preview cards (for related pages/assets): mandatory (!) as it is essential to give users easy ways to navigate further the website; to use just above the Get in touch module

Quick note: please consider that the screenshots below do not contain the 50-50 module and the preview cards as we are in the process of updating the screenshots, but they are important modules for you to use, as we noticed that a lot of articles are dead-ends (no CTA and no related pages).

Examples, allowing for flexibility

According to the amount of visuals that you have available and the focus of the page you are allowed for a certain flexibility. You can use the below as 3 different ways to approach “articles”

Text-only article

Article with product focus

Image focused article