Skip to main content
Question

How to make a flexible width component consisting of text and an element as a stylized "underline"

  • July 22, 2022
  • 1 reply
  • 1800 views

Rory77

image

I’ve got this heading style component. I’d like to be able to use this component in designs and type in proper placeholder text and have that stylized underline element with the jagged edge you see to match the width of whatever is typed.

If the text happens to break to 2+ lines, the stylized underline should remain under the “block” of text but still stretch the width of the text responsively, not repeat per-line of text as it would if you were just using like for example.

I feel like this has probably been asked, I’ve searched but it could be I’m just not searching against the correct terms. I’m coming from Adobe XD so things are just different enough to throw me off.

Apologies if this is a repeat.

Thanks for your suggestions.

Avokadomos
  • New Participant
  • August 15, 2022

Make the wrapper into a vertical auto layout frame, and then set the underline to fill container and use a tiled image.

image


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings