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!

[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!

 

[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!

[jonchim]

Hi @Egoi,

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