Hi All,
The CTA labels for the Product entities in my account vary in length. As you can see in the image below, the size of the CTAs is inconsistent depending on how many characters are in the label. Based on what I’ve learned about CSS as a Hitchhiker, I think I will need to add a wrapper to the CTAs. I reviewed the Core Frontend - Data Mappings & CTAs module and did not see any instructions on how to do this. Does anyone have some on advice on how to proceed?
Hey @Austin_DaCunha - I would recommend styling each of your vertical cards separately, as you may want to only apply some of this CSS to a certain vertical. With that said, I would suggest using iconName: '' in your card component.js file so that you unset the CTA icons. Then, you can apply the following to your card:
.HitchhikerCTA-iconLabel{ white-space: normal; }
This will produce the following result:
Note that you will want to test this on different devices to ensure it comes across as expected. I would also recommend setting an explicit width on your CTAs so that they’re consistently sized, but that is up to you. Let me know if there’s anything else I can help with you as you continue to style your CTAs.
Sam
Hey @Sam_Torres this looks great thank you! I will circle back with any follow up questions
