Using link for card header

[shyamajp]

Hello!
I am using inside and is surrounded by (from react-router-dom).

What I want to achieve here is to make in $text-color-link since it has link to other pages. Small note: There are multiple cards in this page, each with link to a different page.

I tried color props, didn't work here. So the only option is overwrite color in css as in the snippet below? Is there a way to import all the css variables at once to the project? (such as $text-color-link)

I appreciate any suggestions! Thank you.

jsx

<Card padding='space60'>
  <Link to={uri}>
    <Heading as='h4' variant='heading40'>
      This is title
    </Heading>
  </Link>
  <Paragraph>This is description</Paragraph>
</Card>

scss

$text-color-link: rgb(2, 99, 224);

article {
  a {
    text-decoration-color: $text-color-link;
    h4 {
      color: $text-color-link;
    }
  }
}

[richbachman]

Hi @shyamajp

Thanks or posting your question. Our components will block any extra styles that are passed. This helps maintain consistency and encapsulated styles. So a Heading will always look like any other Heading.

You could use our Anchor component with the Heading component like so:

<Heading as="h4" variant="heading40">
    <Anchor href={url}>
        This is the title
    </Anchor>
</Heading>

That way you get the Anchor styles. Our Anchor should be able to work with React Router. Take a look a this previous discussion for a couple helpful links / options: #758 (comment)

Let us know if that helps.

[shyamajp]

Thank you for your response, this is very helpful.
Just want to clarify but there is no way to import all css variables like colors, correct?

[shyamajp]

I would also like to hear any suggestions regarding this header with link for a better UI, ensuring that users know that this is a link.

[richbachman]

Just want to clarify but there is no way to import all css variables like colors, correct?

Correct. The only way to "style" things within Paste is to use the Box and Text primitives which come with style props ties to the design tokens.

I would also like to hear any suggestions regarding this header with link for a better UI, ensuring that users know that this is a link.

Maybe add an Anchor at the bottom of the card? Something like this: https://share.getcloudapp.com/OAugeqoy

[shyamajp]

Sorry for the delay, I will change the design to anchor at the bottom as recommended by Paste team. Thank you for all your support :)

[jweintraub]

Can you share the design for this modal?