Styling a Tabs Component
This is a Tabs Component
What we call a Webflow Component is a pre-configured object composed of a structure of Elements, with default styling and eventually options in the Settings tab.
Tab 1 content
Tab 2 content
Tab 3 content
Layout using Flexbox
This is the same Tabs component that previously, but it's styled differently.
Flex is used on the Tabs element itself
Tab 1 content
Tab 2 content
Tab 3 content
Tab 1 content
Tab 2 content
Tab 3 content
Layout using Position
This is the same Tabs component that previously, but it's styled differently.
This time, the links container is floating over the tabs content, using Position absolute.
Tab 1 content
Tab 2 content
Tab 3 content
In the content part of the tabs, you can create any layout.
Tab 1 photo
Tab 1 title
Tab 1 description
Tab 2 photo
Tab 2 title
Tab 2 description
Tab 3 photo
Tab 3 title
Tab 3 description
A click on a tab changes an element outsides of the Tabs component
We're using IX to change any element of the page when a Tab Link is clicked.
Tab 1 content
Tab 2 content
