Quicktips
Quick tips have been designed for stand out copy when you want to highlight a point, or draw attention to additional information. They can also be used in a stacked or list format by adding them to columns within a layout container.
Usage
Quick tips can accommodate either a 32px (default) icon or a delta heading and body copy. The body copy can also be used on it’s own. A CTA within a quick tip would be a text link, never a button as this distracts from the copy which we are trying to draw attention to. For a single quick tip, we recommend a medium or large utility block. The blocks should be able to house up to 245 characters. For two column quick tips, we recommend a medium or large utility block to accommodate both sets.
Brief paragraph explaining the need for different nutrition when a puppy has been neuteured or sterilised.
<div class="rc-quick-tip rc-bg-colour--brand3 rc-shadow rc-shadow-black--soft rc-padding--sm rc-padding--md--mobile rc-text--center">
<span style="display: inline-block;" class="rc-icon rc-hunt rc-brand1 rc-margin-bottom--sm rc-margin-bottom--md--mobile"></span>
<p>Brief paragraph explaining the need for different nutrition when a puppy has been neuteured or sterilised.</p>
<div class="rc-content-v-middle rc-margin-top--sm rc-margin-top--md--mobile">
<a class="rc-margin-y--none rc-styled-link rc-styled-link--cta" href="#">Find out more</a>
</div>
</div>Copied!
This is a title
Brief paragraph explaining the need for different nutrition when a puppy has been neuteured or sterilised.
<div class="rc-quick-tip rc-bg-colour--brand3 rc-shadow rc-shadow-black--soft rc-padding--sm rc-padding--md--mobile rc-text--center">
<p class="rc-delta text-brand1 rc-margin-bottom--sm rc-margin-bottom--md--mobile">This is a title</p>
<p>Brief paragraph explaining the need for different nutrition when a puppy has been neuteured or sterilised.</p>
<div class="rc-content-v-middle rc-margin-top--sm rc-margin-top--md--mobile">
<a class="rc-margin-y--none rc-styled-link rc-styled-link--cta" href="#">Find out more</a>
</div>
</div>Copied!