How do I achieve a Type design like this? It is an actual text with the graphics.
Do you have a live example. You can look at the HTML. It would likely be done in CSS
If was me I wrap the words premium brands, add a class and make a line in the button, increase the size of the line and give it color… seems it will work…
Hey @kwakukwaku
You can do it this way… add this class to the page header. If you want to change the colour change the #8EFA00
<style>
.highlight-green {
background: linear-gradient(180deg,rgba(255,255,255,0) 50%, #8EFA00 50%);
}
</style>Then either apply it to all the text or as @Pealco said, wrap the text in a span and apply the class to the span.
The result…
If you want the highlight to sit lower, change the 50% & 50% to 60% and 40% etc.
3 Likes
@Pealco
I tried yours by adding a class, creating a solid line border, what I cant figure out is how to increase the size and make it bigger. I can only increase the width…Kindly guide me on how to increase the size.
Thanks
Yeah I don’t think using a border is possible for that outcome.
Whats the way around it using the classes?
Using the Class manager you mean? At present it doesn’t support the attributes I used. You just need to add it to the header.
Yes, yours works fine. I was also hoping @Pealco’s suggestion will work as well.
being able to create a line and make it bigger without using the css style code.
If it doesnt work using class manager. will stick to the code you sent.
This was as close as I could get with using the class manager and the background gradient settings available
You can’t adjust the transition point or make it solid. Hence the code in the header was the best solution at present.
1 Like
Yeah I can see. Will stick to your code 
Much appreciated!
1 Like