Component
A component is a reusable interface or content pattern that can appear within multiple pages or templates.
Components are smaller structural units than complete page templates.
Common Examples
Components can include:
- Hero sections
- Call-to-action blocks
- Cards
- Accordions
- Testimonials
- Author information
- Related-content sections
- Navigation menus
- Forms
The same component can often appear in several different templates.
How It Works
A component defines a repeatable pattern.
It may include:
- Content fields
- Layout rules
- Behaviour
- Styling
- Accessibility requirements
- Variations
For example, a CTA component might always contain:
- Heading
- Supporting copy
- Button label
- Button URL
while allowing those values to change from one page to another.
Why It Matters
Components make repeated interface patterns more consistent and easier to maintain.
A well-designed component can be improved once and reused everywhere it appears.
This is particularly useful for Website Accessibility because accessible behaviour can be built into the shared component instead of recreated on every page.
It can also support Website Performance by reducing duplicated implementation patterns.
Common Problems
Common component problems include:
- Creating a component for something used only once
- Allowing many nearly identical variants
- Making components overly configurable
- Mixing unrelated responsibilities into one component
- Rebuilding the same pattern independently in different templates
- Styling components based entirely on where they appear
How to Improve
Create components around meaningful repeated patterns.
Give each component a clear responsibility and keep variation constrained enough that the pattern remains recognizable and maintainable.