Use styling for CRM Cards

[Egoi]

Hi there,
I have creatd a CRM Card using ui-extensions, just using Flex, Tile and Text components as shown below:

<Flex direction={'column'} gap={'small'}>
 {
 deals.map(deal => {
 return (
 <Tile flush={false} gap={'small'}>
 <Link href={`https://app.hubspot.com/contacts/45186210/deal/${deal.id}`}>{deal.properties.dealname}</Link>
 <Text>Cantidad: {deal.properties.amount || "-"} €</Text>
 <Text>Pipeline: {pipelines[deal.properties.pipeline]}</Text>
 <Text>Etapa: {pipelinesStages[deal.properties.dealstage]}</Text>
 </Tile>

 )
 })
 }
 </Flex>

I want to have the same appearance as HubSpot default look and feel as this one:

But using HubSpot ui components I keep experiencing padding and margin problems:

Tile component adds or removes padding when flush parameter is set to false or true, but I don’t see a way to control the amount of padding.
Text component adds a margin-bottom that I´m not able to remove.
That should solve the styling.
Thanks in advance!

[jonchim]

Hi @Egoi,

In your flex tag if you do gap=“flush” that should fix the spacing between your <text> tags

[Egoi]

Hi @jonchim,
Thanks for you reply. Tried adding gap=“flush” on Flex element but it just removes the vertical spacing between the Tiles elements, not the text blocks inside the Tile wrapper.

[jonchim]

ahh got it, @Egoi you might be able to wrap another flex tag with the flush gap inside your tile tag

<Tile flush={false} gap={"small"}>
 <Flex direction={"column"} gap={"flush"}>
 <Link href={`https://app.hubspot.com/contacts/45186210/deal/${deal.id}`}>{deal.properties.dealname}</Link>
 <Text>Cantidad: {deal.properties.amount || "-"} €</Text>
 <Text>Pipeline: {pipelines[deal.properties.pipeline]}</Text>
 <Text>Etapa: {pipelinesStages[deal.properties.dealstage]}</Text>
 </Flex>
 </Tile>

[Egoi]

Thank you!
This worked like a charm to remove margin-bottom on Text elements. The only thing that I don’t know how to do it, is removing the padding of the Tile. I don’t seee any other component that could work, as Box component is behaving the same way.

[jonchim]

no problem @Egoi !
Unfortunately i’m not seeing anything that would remove that padding. I believe it’s default from HubSpot. Does it have to live in a tile/box? Can you separate it with dividers?

[Egoi]

Hello @jonchim,

Sure! I could use dividers but I wanted to give the same look and feel as native HubSpot cards. Thank you!

[aanchalsheth]

Hi @Egoi ,

Thanks so much for your feedback. Hot off the press: we just released a ‘compact’ prop in Tile to help you with more spacing control. Here’s the docs. Let me know if I can help in any other way / if you have more feedback

[Egoi]

Thank you @aanchalsheth!
It looks better now, not exatcly as the native HubSpot card but closer. It would be nice if we could have the same spacing as the original HubSpot component
HubSpot card uses a 8px 12px padding while compact parameter adds 20px 20px to Tile component as seen in the image below. Let me know for any update! Thank you!