Global Components
Reusable across all Page Types in your project
- Accessed via the Component Library
- Displayed with the Library icon
- Accessible from any Page Type configuration
- Changes affect all instances across your project
- Ideal for standardized content blocks
Local Components
Scoped to a single Page Type for unique needs
- Exist on only one Page Type
- Good for creating one-off or unique Components
- Can be converted to a Global component by adding to your library
Benefits of the Component Library
Freedom and flexibility
Compose compelling, unique content experiences with Pages built using Components
Quality control
A Component that’s been saved to your Library can be used across multiple Page Types, and its structure will stay consistent.
Centralized management
Edits to a Component in your Library will automatically propagate to all the Page Types where it has been used.
Identifying Library Components
You can denote which Components on a Page schema are in your library by the presence of the Library icon:Accessing the Component Library
Select Components from your Component Library by simply clicking the Add from Library button or the Library shortcut icon:Viewing all Components
Access your full Component Library from your Content Type dashboard. You can filter by Components at the top to find your entire Component Library.Saving local Components to the Library
To save a Local Component to your Component Library simply click on the Save to Library button:Building a Component Library
Organizing your Components
- Start with common patterns - Hero, Features, CTA, Testimonials
- Keep components focused - Each component should do one thing well
- Use consistent naming - snake_case for API keys, descriptive names
- Document your components - Help editors understand when to use each
Suggested Component Library
| Category | Components |
|---|---|
| Headers | hero, hero_video, hero_slideshow |
| Content | text_block, text_image, two_column |
| Features | features_grid, features_list, comparison_table |
| Social Proof | testimonial, testimonial_carousel, logo_wall |
| Calls to Action | cta_simple, cta_form, cta_banner |
| Media | image_gallery, video_embed, image_carousel |
| Data | pricing_table, stats_counter, timeline |
Component Library best practices
Establish naming conventions
Establish naming conventions
Use clear, descriptive names like “Hero Section”, “Testimonial Card”, or “Feature Grid”. Prefix related Components (e.g., “Blog - Author”, “Blog - CTA”).
Document Component purpose
Document Component purpose
Add help text to Component fields so content editors understand what each field is for and what content it expects.
Plan before building
Plan before building
Before creating Components, map out all the content blocks your site needs. Identify patterns and opportunities for reuse.
Keep Components focused
Keep Components focused
Each Component should serve a single purpose. A “Hero” Component should contain hero-related fields only—don’t mix in unrelated content.
Limit Component Picker options
Limit Component Picker options
Only add relevant Components to each Page Type’s Component Picker. A careers page doesn’t need a pricing table Component.
FAQ
What does having "(old)" in the component name mean?
What does having "(old)" in the component name mean?
It means those Components were identified as not being used anywhere. You can rename them or delete them to clean up your Component Library.
What happens when I edit a global Component?
What happens when I edit a global Component?
Changes automatically propagate to all Page Types where the Component is used. This allows you to update your content structure site-wide with a single change.
Can I convert a global Component to a local one?
Can I convert a global Component to a local one?
No, but you can remove a Component from the library (which disconnects it from Page Types) and then add it back as a local Component to specific Page Types.
How many components can I have in my library?
How many components can I have in my library?
There’s no hard limit on the number of Components. However, keep your library organized and remove unused Components to maintain clarity.