From 149f15bd52faf3f9216dfe548832acb63b2b527e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cnora?= Date: Wed, 28 Feb 2024 14:57:37 -0700 Subject: [PATCH] docs(card): add marketing card guidance --- .../src/pages/components/badge/index.mdx | 2 +- .../src/pages/components/card/index.mdx | 114 ++++++++++++++---- 2 files changed, 94 insertions(+), 22 deletions(-) diff --git a/packages/paste-website/src/pages/components/badge/index.mdx b/packages/paste-website/src/pages/components/badge/index.mdx index 45b80c7e31..22aba9a221 100644 --- a/packages/paste-website/src/pages/components/badge/index.mdx +++ b/packages/paste-website/src/pages/components/badge/index.mdx @@ -293,7 +293,7 @@ but would benefit from the visual affordance of differently-colored Badges. Icon ### Brand -Use the brand Badge to highlight Twilio brands, such as for cross-selling opportunities or to recommend specific pricing plans. Brand icons are optional, and should appear before the text. +Use the brand Badge for cross-selling opportunities across platforms (e.g., Segment, SendGrid, Communications, Flex) and pricing plans. Use these sparingly. {` diff --git a/packages/paste-website/src/pages/components/card/index.mdx b/packages/paste-website/src/pages/components/card/index.mdx index fb1094621c..398dbb714f 100644 --- a/packages/paste-website/src/pages/components/card/index.mdx +++ b/packages/paste-website/src/pages/components/card/index.mdx @@ -9,11 +9,13 @@ import Image from 'next/image'; import {Anchor} from '@twilio-paste/anchor'; import {Box} from '@twilio-paste/box'; import {Button} from '@twilio-paste/button'; +import {Callout, CalloutHeading, CalloutText} from '@twilio-paste/callout'; import {Card} from '@twilio-paste/card'; import {Heading} from '@twilio-paste/heading'; import {Text} from '@twilio-paste/text'; import {Paragraph} from '@twilio-paste/paragraph'; import {Stack} from '@twilio-paste/stack'; +import {Separator} from '@twilio-paste/separator' import Changelog from '@twilio-paste/card/CHANGELOG.md'; import {DoDont, Do, Dont} from '../../../components/DoDont'; @@ -81,9 +83,9 @@ to Design System Office Hours to see if another component or pattern could fit y ### Examples -#### Basic Card +#### Default Card -An example of a Card with default padding. +By default, a Card has `space100` padding, which can be adjusted with [padding props](/components/card/api#card) and [spacing tokens](/tokens/list#spacings). {` @@ -97,12 +99,33 @@ An example of a Card with default padding. `} +#### Adjusting padding + +You can set non-default padding on all sides of a Card. + + + {` + + + + + + + Alerts and notifications + + Inform, engage, and drive customers to take action. Deliver reliable multichannel notifications through Twilio. + + + + +`} + + #### Card with Title, Body and Button One of the most common use cases for a Card is to relate a title ([Heading](/components/heading)), supporting body copy ([Paragraph](/components/paragraph)), and primary action ([Button](/components/button)) together. Relating these three elements together with a Card makes it easy for a user to -digest and provides a clear call to action. Padding surrounding the inner content of a Card can be -adjusted to suit the needs of your implementation. +digest and provides a clear call to action. {` @@ -136,23 +159,72 @@ adjusted to suit the needs of your implementation. `} -#### Card with Centered Content - -Your implementation use case may call for a Card with centered content. You can accommodate this by -using the alignment props available on some components, or by creating a custom layout inside your -Card using Box or Flex. - - - {` - - - We want a world where boys can feel, girls can lead, and the rest of us can not only exist but thrive. This is not - about erasing men and women but rather acknowledging that man and woman are two of many—stars in a constellation that - do not compete but amplify one another’s shine. - - — Alok Vaid-Menon - -;`} +#### Marketing card + +Use these layouts when you need to draw customers’ attention to upsell and cross-sell opportunities. Use them sparingly, mainly when they’ll help customers solve immediate problems. + + + Research insight on marketing and cross-selling + + Research from Twilio has shown that cross-sell cards aren’t useful when the developers are in the product focused on urgent problems. They’re likely to ignore these cards, regardless of how they’re presented, until they’re relevant to a current project they’re working on. + + + +To create a marketing card, start by layering items from the top of this list. Add or remove items as you work your way down to create the right level of emphasis for your card: + +1. Place the content at the top of the page. +2. Add more padding than other text content or Cards around it. Start with `space-130` and size up in 8px increments from there. +3. Add an illustration. +4. If you’re cross-selling across platforms (e.g., Segment, SendGrid, Communications, Flex), add a [brand Badge](/components/badge#brand). + +Most marketing content in the product is a _suggestion_ to customers. As you layer items from the list, make sure you’re not distracting from their main goals on a page. A marketing Card should catch a customer’s attention but not at the expense of everything else in the flow. + +Don’t use everything in the list at once. If your marketing content is not the main content of a page, use 1-2 items. If it is the main content, use no more than 3 items. + +You might even find out that you don’t need to put your content in a Card. To emphasize the content without using Card, use [Box](/primitives/box) and `color-background-weak`. + +Use more padding and illustrations: + + + {` + example +`} + + + + {` + example +`} + + +Use illustrations and a marketing Badge: + + + {` + example +`} + + +Don’t use Card at all: + + + {` + example +`} + + +If these options don’t work for your use case and you need to create something custom, [request a creative review with the Brand team](https://library.twilio.com/guidelines/guide/9306890b-4bde-4210-bb35-2a566890e47a/page/db009ba3-57e3-4e04-bfe3-efc5d38860d1) and partner with them to make sure it aligns with Twilio’s brand guidelines. + +#### Pricing cards + +Use this layout to show a group of cards with pricing plans. Use a brandmarketing [Badge](/components/badge#brand) to highlight a “recommended” plan and decorative Badges for a customer’s current plan. + +The text layout in each Card is a suggestion. Adjust it as needed for your use case. + + + {` + example +`} ## Composition notes