About this block
A centred hero on your brand colour that leads with news. A small pill at the top flags a launch or update and links to the details, then the headline, a short pitch and two buttons do the selling. A row of customer names underneath adds quick proof before anyone scrolls.
When to use it
- You've just shipped a new version, feature or product and want returning visitors to notice.
- Your homepage needs one clear headline and two next steps, like a free trial and a demo.
- You have a few well-known customers or partners you can name near the top of the page.
What's inside
- A full-width section in your primary colour, with everything centred and the text in the matching contrast colour.
- An announcement pill with a small 'New' tag, a one-line message and a 'Read the announcement' link with a chevron.
- An h1 headline that steps up in size from phones to desktop, plus a short subheadline.
- A solid button and an outlined button, both inverted to stand out on the brand colour. They stack on phones and sit side by side from tablet width.
- A 'Proudly powering' label over three customer names set in bold heading type.
How to customize it
- Point the announcement link at your blog post, changelog or launch page, and keep the message to a few words so the pill stays on one line.
- Change the two button labels to the actions you want, such as 'Start free trial' and 'Book a demo', and set where each one goes.
- Swap the three customer names for your own. If you have logo files, replace each name with an Image.
- Remove the announcement pill when there's no news, and the hero still works as a plain centred hero.
Questions
- How long should the announcement text be?
- Aim for under 40 characters. On desktop it shares one line with the tag and the link. On phones the link drops to a second line inside the pill, so a short message keeps it tidy.
- Can I use real customer logos instead of names?
- Yes. Replace each name with an Image of the logo. Single-colour logos in the same light tone as the text keep the row calm on the brand background.
- Is the headline good for SEO?
- It's the page's h1, so use it for the main thing the page is about. Keep any other headings on the page as h2 or lower.