add draft campaign card guidance

docs/components/campiagn-card.md

@@ -0,0 +1,49 @@
+---
+layout: layouts/component.njk
+title: Campaign card
+description: Use the campaign card to tell people about important healthcare campaigns.  
+tags:
+  - component
+---
+
+[add example]
+
+## When to use
+
+Use the campaign card at the bottom of the NHS App homepage.
+
+The campaigns we promote must:
+
+- be relevant to public health services
+- be relevant to at least 70% of NHS App users (and not about a particular health condition, for example)
+- have an onward digital journey that meets our [usability and accessibility standards](https://digital.nhs.uk/services/nhs-app/how-to-integrate-with-the-nhs-app/standards-for-nhs-app-integration)
+
+Campaigns that are not run by the NHS must also have a journey that has been [integrated with the NHS App](https://digital.nhs.uk/services/nhs-app/how-to-integrate-with-the-nhs-app#standards-for-nhs-app-integration).
+
+## When not to use
+
+Do not use the campaign card to duplicate a link that is already available on the homepage.
+
+## How to use
+
+The campaign card consists of a photograph, a heading and body text. The whole of the card is one selectable link.
+
+### Photography
+
+The photography we use on the campaign card is usually decorative rather than informative. This means alt-text is not needed. See the [service manual guidance on alt-text](https://service-manual.nhs.uk/accessibility/content).
+
+### Heading
+
+The heading should have a persuasive tone. The wording of existing headings or slogans for the campaign can be a helpful reference point.
+
+There is space for one line of heading text. The maximum character count is 23 characters including spaces.
+
+### Body text
+
+Body text should have an informative tone. It should help users understand what they can do if they follow the link.
+
+There is space for two lines of body text. The maximum character count is 75 characters including spaces.
+
+## Research
+
+In our research users noticed and engaged with the campaign card on the homepage. They responded positively to the tone of the text, the use of photography, and the idea of this type of information being present on the homepage.