danielroe.dev / ripple-framework
[READ-ONLY] Mirror of https://github.com/danielroe/ripple-framework. Ripple is the presentation layer for building websites on the DPC Single Digital Presence platform.
0
Fork 0

Configure Feed

Select the types of activity you want to include in your feed.

Update 7.campaign-banner.md

author
jodwyerdpc committer
GitHub date (Apr 12, 2023, 10:22 PM +1000) commit 7ce1472e parent 663ebd1a
+67
+67
docs/content/design-system/5.components/7.campaign-banner.md
··· 1 + --- 2 + title: Campaign Banner 3 + description: Campaign banners draws user's attention to promoted content. 4 + layout: page 5 + label: Core 6 + links: 7 + - text: Figma 8 + url: #colour 9 + - text: Storybook 10 + url: #component 11 + --- 12 + 13 + ## Usage 14 + Campaign banners promote content. They use a feature image and have an optional call to action. 15 + 16 + The banner has a headline and short summary text. These point users to promoted content and guide them to the call to action. 17 + 18 + They can be used at the top or bottom of pages, under the header, or above the footer. 19 + 20 + ::DocsExample 21 + --- 22 + id: core-navigation-campaign-banner--primary-image 23 + --- 24 + :: 25 + 26 + ### When and how to use 27 + - Promote a campaign or related page content. 28 + - Add an optional image. 29 + - Use with an optional call to action. 30 + 31 + ### When and how not to use 32 + - Don’t overload with content. 33 + - Don’t use an unrelated image. 34 + 35 + --- 36 + 37 + ## Variants 38 + The Campaign Banner has two variants: 39 + - Featured, which appears at the top of the page, below the [header](). 40 + - Image Inset, which appears at the bottom of the page above the [footer](). 41 + 42 + ### Featured 43 + A featured campaign banner goes at the top of the page underneath the header. When on larger screens, the image is cropped in a shape and can overlap the above component (header). 44 + 45 + There is an option to include metadata for the image if required. 46 + 47 + ::DocsExample 48 + --- 49 + id: core-navigation-campaign-banner--primary-image 50 + --- 51 + :: 52 + 53 + ### Image inset 54 + Image inset variant sits above the footer at the bottom of the page. This should be used for less prominent campaigns. For featured campaigns, we recommend using the featured variant at the top of the page. 55 + 56 + ::DocsExample 57 + --- 58 + id: core-navigation-campaign-banner--secondary-image 59 + --- 60 + :: 61 + 62 + --- 63 + 64 + ## Theming 65 + The Campaign Banner adopts its theming from the [button]() component. 66 + 67 + If you choose neutral button for your site, the Campaign Banner will display buttons in the neutral theme. 1 68