Using box primitive on cards

[simsemma]

Hello! We're working on the attached pipeline view within the Segment app. I know we received feedback from the paste team on leveraging the card component with the box primitive to make it something selectable, with hover states, etc. rather than leveraging the visual picker. Can you provide more guidance on how we can go about implementing the box primitive? The engineers on my team want to understand how to go about implementing this. We can attend office hours if helpful as well!

[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 glad to hear that you're considering using the Box primitive for your pipeline view. The Box component is a great choice when no other component in Paste works for your specific needs.

Here's a basic example of how you might use the Box component:

import {Box} from '@twilio-paste/core/box';

<Box
  padding="space30"
  backgroundColor="colorBackground"
  borderRadius="borderRadius20"
>
  Your content here
</Box>

In this example, we're using the Box component to create a container with a specific padding, background color, and border radius. You can adjust these properties to fit your design needs.

Remember, the Box component is very flexible, but it's important to try to align your design with the existing Paste components as much as possible. This will help you leverage more of our system and reduce your maintenance costs.

If you need more specific guidance, I would definitely recommend attending our weekly Design System Office Hours. You can also post your questions in our discussions or request feedback on your usage of Paste components.

I hope this helps! Let me know if you have any other questions.

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:

• Interactive cards with flow (updated: 08/10/2023, similarity score: 86%)
• Input field (updated: 05/10/2023, similarity score: 86%)
• Content Editor Components - Visual Picker (updated: 02/11/2023, similarity score: 85%)

[SiTaggart]

Hi @simsemma

Since we initially answered the related discussion post (thanks Pastebot for your top suggestion), we've become more familiar with the screen and its user interaction.

I've gone and updated the guidance in that discussion to more accurately reflect our current thinking based on our updated understanding.

Tl;DR: We strongly encourage the use of Visual Picker.

Thanks!