Call to Actions

Boxed CTAs

3 on desktop

Maxmium 40 characters for message

2 on desktop

Maximum 55 characters for message

1 on desktop

Maxmium 64 characters for message

You can replace the background image by replacing style="background-image: url('/Assets/img/content/astar-webdesign-overview-images-programme-adopt-600x600px.jpg');">. recommended size is 600x600 3 or 2 on desktop. 1000px for 1 on desktop.

Official Call to Action buttons

Your Text

Your Text

Your Text

1. Replace the # in href attribute to your url destination. Make sure to open in new tab for external urls or documents.
2. Replace "Your Text" to your CTA message.

Hyperlinks

To read more about this research, please click here.
This is a bad example of hyperlinking

Find out more about what A*STAR has done in COVID-19 research.
This is a good example of hyperlinking

Banner CTA

If you see href="#" in the code, it means you need to replace # if your destination url.

If you see style="background-image: url('/assets/img/content/astar-CTA-blue-vector-background.jpg');" , it means you can replace with your own image, if you know what you are doing. If not, please use the default background image.

Banner With Text

Card Stories

Read More Link

Custom Call to Action Cards

The image on the left is 300x300, png file with transparent bg. you can replace it if you know what you are doing. Replace the href="#" to your destination url.

PDF/DOC Link

This is a sample link to your PDF/DOC file

Do specify target="_blank" in your anchor tag, so as to open in new tab. Use Document Manager to link the file.

Arrow Text

No Spacing (gutter) Colored Cards

Your title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pharetra diam felis, non vestibulum magna porta sed. Aenean nec ante luctus, tincidunt nunc quis, pulvinar orci.

Learn More

Your title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pharetra diam felis, non vestibulum magna porta sed. Aenean nec ante luctus, tincidunt nunc quis, pulvinar orci.

Learn More

Your title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pharetra diam felis, non vestibulum magna porta sed. Aenean nec ante luctus, tincidunt nunc quis, pulvinar orci.

Learn More

Your title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pharetra diam felis, non vestibulum magna porta sed. Aenean nec ante luctus, tincidunt nunc quis, pulvinar orci.

Learn More

Your title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pharetra diam felis, non vestibulum magna porta sed. Aenean nec ante luctus, tincidunt nunc quis, pulvinar orci.

Learn More

Your title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pharetra diam felis, non vestibulum magna porta sed. Aenean nec ante luctus, tincidunt nunc quis, pulvinar orci.

Learn More

News Cards