Naming Guideline
This convention ensures consistent, readable, and scalable naming across all sections and blocks in the Renblox system.
While it’s not mandatory to memorize these rules, understanding them will help you navigate the project structure more efficiently.
Block Naming Pattern
All sections follow the pattern:
section-name + variation(optional) + number + sub-variation(optional)Examples:
Hero One
Hero A One
Hero A One Flip
Variation
Each letter represents a specific layout variation or arrangement style:
| Variation | Layout Type | Example | Description |
|---|---|---|---|
| (none) | Default Layout | hero-one | Used for standard sections or when blocks variations are minimal. |
| A | Common Layout | hero-a-one | Same layout with a different component arrangement or positioning. |
| V | Vertical Stack Layout | hero-v-one | Components are arranged vertically, stacked from top to bottom. |
| B | Bento Layout | hero-b-one | Section designed using a bento-style grid (varied shapes and component areas). |
| C | Unique Card Layout | hero-c-one | Section includes distinct or uniquely styled cards as the main design feature. |
| G | Grid / Off-grid Layout | hero-g-one | Section uses structured or creative grid-based layouts. |
| I | Internal Component | checkout-summary-i-total | Represents an internal, dependent component that exists within a parent layout and is not intended to be used standalone. |
| T | Text-Only Layout | hero-t-one | Section primarily focuses on text with minimal or no media elements. |
| U | Unique Layout | hero-u-one | Completely custom or experimental layout not fitting standard categories. |
Sub Variations
Block sub-variations are created by adding a suffix that describes a specific visual or structural modification.
In most cases, the layout change is clearly reflected by the suffix name itself.
Examples:
Hero One Flip
Hero One Secondary
Header A One Border
Feature T One Border
Service C Two Align Center
Common Variation Suffixes
-flip— Reverses or mirrors the component order.-secondary— Appliesbg-secondaryfor visual distinction.-image— Uses a background image in the section.-border— Adds a border around the layout block.-align-left— Aligns content to the left (commonly used in cards).-align-center— Centers content within the design (commonly used in cards).
These are just some common sub-variations — others can be easily understood from their naming.