Skip to content

Commit

Permalink
docs(card): add marketing card guidance
Browse files Browse the repository at this point in the history
  • Loading branch information
@nkrantz
nkrantz committed Feb 29, 2024
1 parent 328f9e2 commit 149f15b
Show file tree
Hide file tree
Showing 2 changed files with 94 additions and 22 deletions.
2 changes: 1 addition & 1 deletion packages/paste-website/src/pages/components/badge/index.mdx
View file
Expand Up @@ -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.

<LivePreview scope={{Box, Badge, ProductEmailAPIIcon, ProductSegmentIcon, ProductCommsIcon, FaxCapableIcon}} language="jsx">
{`<Box display="flex" columnGap="space80">
Expand Down
114 changes: 93 additions & 21 deletions packages/paste-website/src/pages/components/card/index.mdx
View file
Expand Up @@ -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';
Expand Down Expand Up @@ -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).

<LivePreview scope={{Card, Paragraph, Heading, Anchor}} language="jsx">
{`<Card>
Expand All @@ -97,12 +99,33 @@ An example of a Card with default padding.
</Card>`}
</LivePreview>

#### Adjusting padding

You can set non-default padding on all sides of a Card.

<LivePreview scope={{Card, Box, Button, Paragraph, Heading, Separator, PrimaryDo}} language="jsx">
{`<Box maxWidth="size40">
<Card paddingLeft="space0" padding="space0">
<Box>
<img src="/assets/illustrations/alerts_and_notifications" alt="" height="100px" width="100px"/>
</Box>
<Separator orientation="horizontal" verticalSpacing="space0" />
<Box paddingY="space60" paddingX="space90">
<Heading as="h2" variant="heading40">Alerts and notifications</Heading>
<Paragraph>
Inform, engage, and drive customers to take action. Deliver reliable multichannel notifications through Twilio.
</Paragraph>
<Button variant="secondary" size="small">Try notifications</Button>
</Box>
</Card>
</Box>`}
</LivePreview>

#### 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.

<LivePreview scope={{Stack, Card, Paragraph, Heading, Button}} language="jsx">
{`<Stack orientation="vertical" spacing="space40">
Expand Down Expand Up @@ -136,23 +159,72 @@ adjusted to suit the needs of your implementation.
</Stack>`}
</LivePreview>

#### 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.

<LivePreview scope={{Card, Paragraph, Anchor, Text}} language="jsx">
{`<Card padding="space200">
<Text as="div" textAlign="center">
<Paragraph>
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.
</Paragraph>
<Paragraph marginBottom="space0">— <Anchor href="https://www.goodreads.com/book/show/51794301-beyond-the-gender-binary">Alok Vaid-Menon</Anchor></Paragraph>
</Text>
</Card>;`}
#### 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.

<Callout variant="neutral" marginY="space70">
<CalloutHeading as="h5">Research insight on marketing and cross-selling</CalloutHeading>
<CalloutText>
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.
</CalloutText>
</Callout>

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:

<LivePreview scope={{Card, Paragraph, Heading, Anchor}} language="jsx">
{`<Card>
example
</Card>`}
</LivePreview>

<LivePreview scope={{Card, Paragraph, Heading, Anchor}} language="jsx">
{`<Card>
example
</Card>`}
</LivePreview>

Use illustrations and a marketing Badge:

<LivePreview scope={{Card, Paragraph, Heading, Anchor}} language="jsx">
{`<Card>
example
</Card>`}
</LivePreview>

Don’t use Card at all:

<LivePreview scope={{Card, Paragraph, Heading, Anchor}} language="jsx">
{`<Card>
example
</Card>`}
</LivePreview>

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.

<LivePreview scope={{Card, Paragraph, Heading, Anchor}} language="jsx">
{`<Card>
example
</Card>`}
</LivePreview>

## Composition notes
Expand Down

0 comments on commit 149f15b

Please sign in to comment.