Component naming

Naming convention

This page explains how we name Components so our Components panel stays organized as the project grows.

Group Name / Component Identifier

• Group Name is the group the component belongs to.
• Component Identifier is what the component is.

For example,

Group Name = Card
Component Identifier = Blog Post

Full component name:

Card / Blog Post


The slash is visual only

Webflow does not create a group from the slash. The slash is a naming convention that visually separates the group name from the component identifier in the Components panel.

The group has to be created manually.

When you create a component, create the group in the Components panel and move the component into it. Global / components go in the Global group. Card / components go in the Card group. Template / components go in the Template group.

The name and the group must match. A component named Card / Blog Post sitting outside the Card group defeats the purpose of the convention.

Group name

The group tells us what type of component this is.

Some common group names

• Global
• Template
• Card
• Form
• Section
• Component

Component identifier

The identifier answers the question, "What is this component?"

A new developer entering the build should know what the component is without opening it.

Examples

Global group

Global components are used across the entire project.

Global / Styles
Holds the style guide and global CSS embeds.

Global / Nav
The primary site navigation.

Global / Footer
The primary site footer.

Template group

Template components exist to be unlinked. We use them as a starting point, not as a live component.

Template / Section
Unlink this component to create a section quickly.

Template / Core Structure
Unlink this component to create the page core structure quickly.

Card group

Card / Blog Post
Blog post card used in the blog Collection List.

Card / Team Member
Team member card used on the about page.

Card / Pricing
Pricing card used in the pricing table.

Form group

Form / Newsletter
Newsletter signup form used in the footer.

Form / Contact
The main contact form.

Modal group

Modal / Video
Video modal triggered from a video thumbnail.

Renaming is fine

Component names can be renamed at any time without breaking instances. If a name stops making sense as the project grows, change it.

Conflicts

If you're in a conflict with naming, don't overthink it.

Just make a decision and move forward.

The decision to give a good name to a group or a component is not always clear. That's ok. Pick something and move on.

Happy building.