topic Re: Use styling for CRM Cards in CMS Development

Use styling for CRM Cards

Egoi — Tue, 02 Apr 2024 11:54:14 GMT

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!

Re: Use styling for CRM Cards

jonchim — Wed, 03 Apr 2024 14:41:08 GMT

Hi @Egoi,

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

Re: Use styling for CRM Cards

Egoi — Wed, 03 Apr 2024 15:04:17 GMT

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.

Re: Use styling for CRM Cards

jonchim — Wed, 03 Apr 2024 15:09:51 GMT

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>

Re: Use styling for CRM Cards

Egoi — Wed, 03 Apr 2024 15:27:28 GMT

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.

Re: Use styling for CRM Cards

jonchim — Wed, 03 Apr 2024 15:58:53 GMT

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?

Re: Use styling for CRM Cards

Egoi — Wed, 03 Apr 2024 17:15:59 GMT

Hello @jonchim,

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

Re: Use styling for CRM Cards

aanchalsheth — Fri, 05 Apr 2024 15:55:51 GMT

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 🙂

Re: Use styling for CRM Cards

Egoi — Fri, 05 Apr 2024 19:04:06 GMT

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!