Feature - Usage
Basic Guidelines
Feature has been created to make introducing a product or proposition at a high level quicker and easier, however, there is no need to use it if the layout does not suit your design needs.
Feature can contain legal content related to the headline and/or body content, as well as an optional Text Link. It is possible to swap the Text Link with a Button.
If you want to add any other content or component to a Feature (this doesn’t include changing the typeface colours), you can do so, but it will no longer be the Feature component and thus shouldn’t be referenced as one when annotating designs.
Feature and Feature List serve different purposes: Feature introduces a product/proposition. The Feature List is about breaking down those propositions into further detail, promoting RTBs (Reasons To Believe).
When is a Feature, not a Feature?
It’s worth noting that a piece of Hero content, normally used at the very top of a page, is typically not a Feature, as it contains a Heading and a Subheading, compared to the Feature which uses a Heading and Body content.
If you are designing a page with a hero, do not use the Feature component. Simply create your content using a normal frame and auto layout to avoid confusion when the page is being built.
If you require a feature with an additional component or extra copy, then you must detach the component (or create from scratch) and make it clear in the notes that it does not use the Feature Pattern.
This configuration is no longer a Feature component due to Display-5 being used for the body content. It is now seen as a piece of Hero content.
Content Guidance
There are no strict character limits on this component, however as with all headlines, please try to avoid the headline running over three lines when viewed on mobile devices. Short and snappier headlines are best to keep the user’s attention and are easier to read.
If using a Text Link, it must adhere to all the best practices of CTA writing by containing descriptive, actionable text “Add Sky Sports”, “Explore Sky Stream”, etc. Generic text phrases such as "click" and "open" should be avoided as they provide the user with little information about where the Text Link will take them.
Buttons and Text Links should never run over two lines of copy.
Alignment
Feature must align with the grid system set out in Foundations. They sit in-line with the rest of the text.
The 12-column example below is downscaled proportionally for illustration purposes.
Colour Usage
The headline element for the Feature can use any brand gradient from the defined accessible Sky colour palette in Foundations.
Using the accessible version of the Broadband Gradient.
Using the default version of the Broadband Gradient which is not accessible on white.