Chronobuttons: Old vs New

It’s been a busy time for us at Web Solutions recently and we’re ready to present to you the fruits of our labour! There are now 7 new snippets available for our web publishers to use.

This post will go through each snippet, comparing the old with the new and explaining how to use the new snippets, suggesting situations where each would be suitable and useful.

New snippets within Chronos

The snippets will fall into one of two new folders – Button or Content. The snippets within the Button folder impact page appearance, content layout and specific actions within a page. The Content snippets affect the display and organisation of content.

Button Folder:

  • Caption overlay – the ‘captioned image snippet’ has been developed into the caption overlay. This snippet can either be used with or without description; this means that the caption can either have a small amount of text to explain it, or can be left to speak for itself!
  • Within this snippet, the caption has moved from underneath the image to sitting in front of the image. For this reason it is important to make sure the image is big enough to be seen behind the description, but not so colourful that it becomes distracting to read the caption and description in front of it (if there is one).
  • The text background and border of this snippet can be either in the highlight, primary or secondary colours on your site.


Above: Caption overlay example without description

  • Classic – this is simply an update of the current ‘classic’ button. It has the same purpose as the old button; however its appearance is more sleek and modern. It can be used with or without a description.
  • This snippet can be used as a basic heading to content, or a simple link to another page. It is a good one to use if you have lots of written content on your page, as it allows the reader to focus on the content instead of being distracted by images and moving carousels.
  • It can be used to split up and categorise content without the use of the menu.
  • The background can either be in the highlight, primary or secondary colours.
  • Classic image – this snippet is similar to the one above, in the sense that it is simply an update of the previous generation version. It can be used with or without a description. Again, like the ‘classic’ snippet, the new snippet has an updated, smarter appearance.
  • The heading and link now appear above the image instead of below. There is also the option of having a description if desired.
  • This snippet is less complex, so similar to the ‘classic’ snippet; it would be suitable on a page with a relatively large amount of content. However keep in mind that images can be distracting when trying to process large amounts of web content. It’s also important to consider that if you have lots of content on a page, it probably won’t be read!
  • The background can either be in the highlight, primary or secondary colours.


Above: Classic image with description

  • Image list – this snippet is similar to the ‘image content snippet with a linked list’; however, instead of the image being separate from the text, it instead lies behind it.
  • This has made the snippet appear less disjointed on the page and visually much more attractive. It creates an interesting and precise frame and background for the list headings which is very engaging for the web user.
  • Similarly with the ‘caption overlay snippet’, the image needs to be big enough to be clearly seen, however not so colourful that it distracts the web user from the list headings. When choosing your image, it’s important to note that the list appears on the right-hand side of the snippet; there’s not much point in using an image where the majority of it is covered by text!
  • The background of the list headings can be either the highlight, primary or secondary colour.
  • Thumbnail – This is a link to a new web page that allows the user to add a small, relevant image on the left hand side of the snippet. The heading and description box can have either a solid colour background or no background if you prefer.
  • This snippet improves flow throughout the site and images on webpages make the site more appealing for web users.
  • As the design is simple, it would be appropriate to use on a page with more text, acting as a heading or subheading or a break in the text.
  • This snippet is best used when you would like to break up large chunks of text and colour; it stops the page becoming to structured and blocky.


Content Folder

  • Image content – this is an update of the current image content snippet and is available with either a description or a list.
  • The background colour of the heading now covers the background of the description/list and stretches around the perimeter of the image, creating a neat and obvious frame for the snippet, making it appear more interesting to the web user.
  • The heading is moved to underneath the image, acting more appropriately as a heading for the description or list.
  • The background is can be either the highlight, primary or secondary colour. 



Right: Image content with description


  • List box – this allows users to create a list in the middle of the page that can link to other pages. This is an alternative to using lists in the column on the left hand side of the page, or having to use separate links in individual boxes.
  • The list can be in either one column or split in two columns within one box.
  • This snippet would be useful on a page with lots of images or with an asymmetrical page layout, as it does not create as much clutter as a snippet that allows for more text.
  • It’s a good idea to limit the number of headings in your list to no more than 4, otherwise it becomes too cluttered and puts web users off reading!
  • The heading background can be either the highlight, primary or secondary colour.


Leave a Reply