Hey Community,
I’m struggling to find a way to either remove the cta text and leave the icon only or entirely shift the cta from the right side of the card down to the bottom left below the text. I’ve tried looking through the cards component js file but removing the text always removes the entire cta and I haven’t found a way through handlebars to let me easily do this either. Also running into some challenges with css for trying to just move the cta to a new placement.
I’ve attached a screenshot of where I currently am with my efforts and a screenshot of my desired end result (mocked up with a design application).
Open to any suggestions!
Hi Khari!
The easiest way to move the entire CTA (both carat and text) is in css. You should change the direction of the content wrapper (currently by default, you are using ‘row’) using this code below.
.HitchhikerStandard-contentWrapper {
display: flex;
flex-direction: column;
}
If you only want to achieve this for the cards in one vertical, make sure to specify which card you are referencing when you are targeting. It will vary by experience, but here you could use .HitchhikerStandard.blogscard. Also, in the mockup above it appears you want to add some padding above the CTA wrapper and below the details text; you can also achieve this in css.
Hopefully this helped!
Adrienne
This was super helpful! Here’s the card I ended up making with the various edits:
In static/scss/answers.scss - Changing placement of CTA and style of it
In cards/blogscard/template.hbs - Swapping the order of caret and cta text
And this all gave me a final result of this:
1 Like
