Anatomy
Pages
Each of our projects pages typically contain the following ingredients and follow the structure below.
Name
Description
The Global symbol contains the websites custom code (Webflow CSS resets etc)
This div is useful to have when applying load interactions & page transitions.
This div contains your navbar component. This method allows the ability to position it fixed, absolute or sticky on different pages.
Page specific content is placed inside this wrapper. This structure allows for sticky footer designs and other page transitions.
Place your page components inside section divs
Place your contained components inside this div
Components
Below you can find an example of a card component. It gives you a high-level overview of the different names we use for child elements. Of course different structures apply depending on the component type (More examples coming soon).
Reference #
Name
.card header
.card body
.card footer
.card visual
.card title
.card desc
.card link
Starter Template
