# Webflow Import Logic

This document describes the logic behind importing blocks and components from Webflow into our codebase.

## Block Import Logic

When importing blocks from Webflow, the first class of the block in Webflow determines the folder in which it will be placed.

|Block Class |Folder in which it will be placed|
|---|---|
|site-block |Blocks > SiteBlocks|
|billboard-block |Blocks > PageBlocks > BillboardBlocks|
|card-block | Blocks > CardBlocks|
|Other classes |Blocks > PageBlocks > ContentBlocks|

The name of the block is a combination of the prefix `vn--` (which stands for variant name) and the block type (site block etc.). This name is used to create the partial.

- `site-block vn--site-header` ⇒ **SiteHeader**SiteBlock.cshtml
- `billboard-block vn--hero` ⇒ **Hero**BillboardBlock.cshtml

The partial will contain all the block code from Webflow. Any components will be replaced with a method to call that component partial. This can be removed based on the component naming convention.

## Component Import Logic

When importing components from Webflow, the first class of the component in Webflow determines the folder in which it will be placed.

|Component Class |Folder in which it will be placed|
|---|---|
|card-component|Components > Cards|
|input-component|Components > Inputs|
|`--component`|Components > General|

If the class only includes `--component`, the component will be added to `Components > General` with the name before `--component` being the partial name:

- `button--component` ⇒ Components > General > Button.cshtml

The name of the component is a combination of the prefix `vn--` (which stands for variant name) and the component type (news, text field, etc.). This name is used to create the partial.

- `card-component vn--news` ⇒ **News**Card.cshtml
- `input-component vn--text-field` ⇒ **TextField**Input.cshtml

The partial will contain all the component code from Webflow.