Targeting Card-specific CTA Icon Labels

Search Best Practices - Search Front-End
1

Hi team,

In the examples I’ve seen of custom css for Answers cards, the CTA icon label is targeted by the class .HitchhikerCTA-iconLabel. Is there a way to target icon labels specific to an answers card, e.g. Professional-Standard CTA icon Labels?

My use case here is that I want white icon labels on FAQs since they will have a colored button background, but for my location cards I don’t want the CTAs to be in button formats so I need a different color on the CTA label.

Thanks for the help!
Johnathon

2

Hi Johnathon,

You can use the parent/child relationships in the HTML of the cards to help you here.

You’ll notice that the card is wrapped in classes that relate to the card type. For Restaurants, if I have a custom restaurant card, you’ll see there’s a restaurant class wrapping the card.

image
image2952×738 264 KB

Similarly, if I’m using an event-standard card for my Events vertical, I’ll see a event-standard class wrapping this div.

image
image2988×838 349 KB

In CSS, when you identify two classes with a space in-between, it will look for all instances of the second class nested within the first (here’s a refresher on CSS selectors).

So, I can add the following CSS:

  .restaurant .HitchhikerCTA {
    color: white;
    background-color: black;
    padding: 1rem;
  }

  .event-standard .HitchhikerCTA {
    color: black;
    border: 1px solid black;
    padding: 1rem;
  }

To produce the following two CTA styles:

image
image1488×1704 401 KB

Let me know if this helps!

4 Likes
3

Hi Amani!

Thank you so much for your brain–this is perfect.

Johnathon

2 Likes