Cross-Sell Cards

[amyodea]

Background

Looking for feedback / guidance on how we would like to use the card component for cross-selling. How do we want it to differ?

Feedback

• Any feedback around the treatment of these cross-sell cards?
• Any concerns with how I have altered the component?

Stage of design

High fidelity designs

Research

No response

Relevant links

No response

Are you looking for visual design support?

• Yes

Additional Information

No response

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Hello! I'm excited to help you with your Card component for cross-selling.

Based on the information provided in the Paste documentation, here are some guidelines you can follow:

1. Composition: When a Card contains text content, use a Heading to highlight the most important information and a Paragraph to add additional context. Do not repeat the information in the header. Front-load the most critical information.

2. Equal Weight: When presenting multiple Cards of equal weight on a single page, structure each Card's content similarly.

3. Flexibility: Card is an extremely flexible container that does not require specific components inside of it. You can compose a Card to support your use case, but elements such as Heading, Paragraph, and Button or Anchor are commonly used.

4. Non-negotiable properties: There are several non-negotiable properties of a Card that differentiate it from a more basic page-layout element, such as Box including background color, border width, border radius, and border color.

5. Cross-sell and upsell: Use a cross-sell or upsell empty state on pages that give access to parts of a product that need to be purchased by the customer. Focus the headline on the overall user benefit, with supplemental text providing additional content on the ‘how’. Cross-sell and upsell empty states almost always include a CTA to contact Sales and an illustration.

Without seeing your specific design, it's hard to provide detailed feedback. However, if you've followed the guidelines above, you're likely on the right track. If you have specific alterations to the Card component, I'd recommend bringing them to the Design System Office Hours for feedback.

Remember, the Design Systems team is here to provide feedback on the usage of Paste components and compositions in your mocks and/or UIs, support on hierarchy, weight, and spacing in your UIs, and answer clarifying questions about Design Systems concepts.

Please don't hesitate to reach out if you have more questions or need further clarification!

I also did a search, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Component usage feedback in showing operator results - Answer (updated: 03/01/2023, similarity score: 85%)
• Component usage feedback in showing operator results (updated: 03/01/2023, similarity score: 85%)
• Flex Entry Page (updated: 09/12/2022, similarity score: 85%)

[serifluous]

Thanks for coming to office hours! Here's the link to the recording: https://www.loom.com/share/92caae62a76a4406803a96bbef004eb2?sid=511761b4-f354-4925-afa9-12b51ff33e6e (password in Slack)

Here's a link to our roadmap with the "Card highlight variant": https://paste.twilio.design/roadmap. I'll reach out to you once I've got a doc together to kickoff the component.