Typography Helpers

Bonsai includes a collection of typography helpers for creating beautiful shadow effects to any box element.


--line-clamp

The --line-clamp helper allows you to easily set a line clamp on an element. The value of this helper defines the number of lines at which text will be clamped.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. 
<div style="--line-clamp:4;"> ... </div>

--text-3d

The --text-3d helper gives text a 3D. Value of this helper sets the 3D color using the text-shadow CSS property. This can be used alongside the --c ulility to set the text color as demonstrated below.

Hello World! 
<div style="--text-3d:#406DC4; --c:#57A1DB;"> ... </div>