# Webflow Folder structure and naming conventions

**TL;DR**: This document provides a folder and naming convention for organizing blocks and components.

Blocks are organized into PageBlocks and SiteBlocks folders within a Shared folder, and further subfolders for specific block types.

Components are organized into General, Cards, and Inputs folders within a Shared folder.

The naming convention for blocks and components follows the format of:
**Block**: [Name][Type].cshtml.
**Component**: [Type].cshtml.

each block starts with a class matching its block type and ends with a vn-- (variant name) class.

each component starts with a class matching its component type and ends with a vn-- (variant name) class unless it's a general component.
</br>

## Blocks

### Block Folder Structure

The block folder structure consists of a **Shared** folder, which contains `Blocks` and its subfolders. The subfolders include `PageBlocks` and `SiteBlocks`, and their respective subfolders.

#### PageBlocks Folder
The `PageBlocks` folder contains blocks that do not have the site-block class. These blocks are used in the admin and can be edited

#### SiteBlocks Folder
The `SiteBlocks` folder contains blocks with the site-block class. These blocks are not in the admin.

└── Shared/
    ├── Blocks/
    │   ├── PageBlocks/
    │   │   ├── BillboardBlocks/
    │   │   │   └── [BillboardBlockName] (HeroBillboardBlock.cshtml)
    │   │   │   
    │   │   ├── ContentBlocks/
    │   │   │   └── [ContentBlockName] (AccordionBlock.cshtml)
    │   │   │
    │   │   └── CardBlocks/
    │   │       └── [CardBlockName] (TeamCardBlock.cshtml)
    │   │       
    │   └── SiteBlocks/
    │       └── [SiteBlockName] (SiteHeaderSiteBlock.cshtml)
    └── Components/

### Block File Naming Convention

The naming convention follows a consistent format of **[Block Name][Block Type]**.cshtml.

**Block Name**: A descriptive name for the UI block.
**Block Type**: The type of UI block, using a standardized type name. Examples of standardized type names include `Billboard Block`, `Card Block` and `Content Block`.

If a Block Name and Block Type have the same name, they'll be combined into a single name. For example, `Hero Billboard` and `Billboard Block` will become `HeroBillboardBlock`. This merging process will not result in duplicate names such as `HeroBillboardBillboardBlock`.

|Block Name|Block Type|Output|
|-|-|-|
|Hero Billboard|Billoard Block|HeroBillboardBlock.cshtml|
|Accordion|Content Block|AccordionContentBlock.cshtml|
|Team|Card Block|TeamCardBlock.cshtml|

### Block Class Naming Convention

The following table shows the naming convention for different types of blocks:

|Block Name|Block Type|Class Name|
|-|-|-|
|Hero Billboard|Billoard Block|`billboard-block vn--hero`|
|Accordion|Content Block|`content-block vn--accordion`|
|Team|Card Block|`card-block vn--team`|

Each block will start with a class matching its block type i.e a **billboard block** would start with `billboard-block`.

The block name will be added as a `vn--` (variant name) class i.e a **hero billboard** would have a `vn--hero` class.

## Components

### Component Folder Structure

The component folder structure consists of a **Shared** folder, which contains `Cards`, `General` and `Inputs`.

└── Shared/
    ├── Blocks/
    └── Components/
        ├── Cards/
        │   └── [CardName] (NewsCard.cshtml)
        │   
        ├── General/
        │   └── [GeneralComponentName] (Button.cshtml)
        │
        └── Inputs/
            └── [InputComponentName] (TextField.cshtml)

### Component File Naming Convention

The naming convention for components follows the format of
[Component Name].cshtml.

**Component Name**: A descriptive name for the component.

|Component Name|Component Type|Output|
|-|-|-|
|News Card|Card Component|NewsCard.cshtml|
|Button|General Component|Button.cshtml|
|Text Field|Input Component|TextField.cshtml|

### Components Class Naming Convention

The following table shows the naming convention for different types of components:

|Component Name|Component Type|Class Name|
|-|-|-|
|Button|General Component|`button--component`|
|Team Card|Card Component|`card-component vn--team`|
|Text Field|Input Component|`input-component vn--text-field`|

If the class is a "General Component" then you can combine the component name and `--component` to create your component class i.e `[GeneralComponentName]--component`

All other components will start with a class matching its component type i.e a card component would start with card-component.

The component name will be added as a vn-- (variant name) class i.e a team card would have a vn--team class.