Most designers settle for rotating text boxes by 90 degrees, but this often leads to unpredictable layout behavior and alignment issues in Framer. Vertical Text Pro solves this by utilizing the native writing-mode: vertical-lr CSS property.
This component ensures your text remains part of the natural layout flow, making it the perfect tool for creating high-end, editorial-style websites, fashion lookbooks, and avant-garde portfolios.
Native CSS Logic: Unlike rotated frames, this component respects the vertical axis, ensuring your padding, margins, and stacks behave exactly as they should.
Plug & Play Simplicity: No code overrides or complex setups. Just drop the component into your project and start designing.
Responsive Ready: Easily toggle between vertical and horizontal modes for different breakpoints, ensuring your mobile layouts remain as functional as your desktop views.
Tailor every detail to match your brand's aesthetic directly from the Framer properties panel:
Dynamic Text Input: Update your copy instantly without diving into the component layers.
Layout Toggle: Switch between Vertical (Yes/No) with a single click.
Integrated Font Picker: Access your full library of fonts, including custom web fonts.
Precision Styling: Complete control over color, weight, and size to ensure your type remains legible and striking.
Perfect For:
Side Navbars: Create modern, vertical navigation menus that stay pinned to the edge of the screen.
Editorial Hero Sections: Add a layer of sophistication to your headings with vertical accents.
Product Details: Use vertical text for tags, dates, or technical specs in e-commerce layouts.
Photography Portfolios: Mimic the look of premium print magazines and gallery descriptions.
Stop compromising on your layout. Bring professional vertical typography to your Framer projects today.
---
---
SDG.
Tony Hallc
