Eyebrow
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
This is large paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
This is normal paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
This is small paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
This is extra small paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
Colors
Primary Color
Secondary Color
Neutral Color
Custom color
Gradients
UI Colors [Not Editable]
CTAS
What handy clickable elements. These are two components, Button Main adn Button Link. You can wire up either of them to open links on or off page, as expected. Now here's the neat part: you can connect a CTA to trigger the Ignitium Media Viewer. All you need to do is connect the right properties, see documentation or hover the property's tooltip for more info, and toggle the Use Media Viewer switch at the bottom of the property menu.
Modals
Need a popup? Have a popup! This component allows you to visually edit a modal that can take any component and hide it in a controllable pop-up. It can be linked to buttons, links, or any clickable component by targeting the id you give it.
Click one of three clickable elements below to open the modal and learn more about creating one yourself. Or if you are viewing this page in the designer, simply scroll down a bit.
What a nifty modal
To create a modal, drag a Modal component into the root of the page like a section. Don't put it inside any other components. From here, you will see a few properties.
- Name controls the id given to the modal. Replace the '[name]' text with a simple one or two-word descriptor of the modal's purpose, creating a name that looks like 'open-booking-modal' if it contains a bookign form, or 'open-ua-card-modal' if it is intended to show more info about a card titled Universal Acces.
- Title controls the header displayed at the top of the modal. You should set this to something descriptive but brief. You may also leave it blank if you don't want text to be displayed at the top of the modal.
In addition to those important properties, there are a few others that enable customization of the modal further. The familiar Wrap Classes and Alignment property control the nested Content Item component that holds the components you add to the modal. An additional image selection property will control the icon shown in the top right of the modal that is used to close the modal. This can be handy if a brand has specific icons they want to use, and the default doesn't match their vibe.
Icons
The custom icon component allows you to upload any svg file and apply colors to it based on the text-color-N classes defined by the Theme Object colors. There is also an additional padded variant that can be styled with the familiar p-x and rounded-x classes. If a padded variant chosen, the color styles will also apply a tinted background color based on the text-color-N class for the icon. Think of the possibilities!
It is important to note that the icons will not display correctly in the Designer. This is a known limitation, and caused by Webflow not running custom JS code in the Designer view. You will be able to see the icon, the color you set, and the visual space it will take up in the Designer view, however.
Standalone
Padded
Shadows
Border Radius