HTML and CSS Reusable Components
HTML & CSS: Reusable Components
Components are reusable chunks of markup and styles-cards, buttons, banners-that keep your design consistent and speed up development.
Note: Think of a component as a mini layout you can copy and reuse across many pages.
Component philosophy
- Create HTML structures with meaningful class names (e.g.,
.card,.cta-button). - Scope styles to the component to avoid unintended side effects.
- Document usage, variations, and accessibility considerations.
Note: Scoped styles mean the CSS only affects that component, so other parts of the page stay untouched.
Buttons
Buttons are links or controls styled with reusable classes.
Use a base .btn and add variants like .btn-primary or .btn-ghost for different emphasis.
Button component
<a href="#" class="btn btn-primary">Primary</a>
<a href="#" class="btn btn-ghost">Ghost</a>
.btn {
display:inline-block;
padding:12px 20px;
border-radius:999px;
font-weight:600;
text-decoration:none;
transition:0.2s ease;
}
.btn-primary {
background:#04AA6D;
color:#fff;
}
.btn-primary:hover {
background:#028a56;
}
.btn-ghost {
border:2px solid #04AA6D;
color:#04AA6D;
}
.btn-ghost:hover {
background:#04AA6D;
color:#fff;
}
The base class handles padding, rounded corners, and transitions.
Variants change colors and hover styles without altering markup.
If you want to read more about CSS Buttons or get an in-depth understanding, go to CSS Buttons in the CSS tutorial.
Card component
Cards group related content with an image, heading, text, and a call-to-action.
Structure markup with semantic tags and utility classes.
Card
<article class="card">
<img src="images/dashboard.png" alt="Dashboard preview" loading="lazy">
<div class="card-body">
<h3>Analytics</h3>
<p>Track performance with real-time dashboards.</p>
<a href="#" class="btn btn-primary">View Demo</a>
</div>
</article>
.card {
overflow:hidden;
background:#fff;
border-radius:18px;
box-shadow:0 20px 40px rgba(15,23,42,0.12);
display:grid;
gap:0;
}
.card img {
width:100%;
height:auto;
}
.card-body {
padding:24px 28px;
}
.card-body h3 {
margin-top:0;
margin-bottom:12px;
}
The CSS rounds corners, adds a subtle shadow, and spaces the body content for readability.
Images scale responsively to the card width.
Source inspiration: CSS Cards.
Alert/notification
Alerts surface inline feedback.
Pair a base .alert with status modifiers like .alert-success for color and borders.
Alert
<div class="alert alert-success" role="status">
<strong>Success:</strong> Profile updated!
</div>
.alert {
border-radius:12px;
padding:16px 20px;
margin-bottom:16px;
}
.alert-success {
background:#ecfdf5;
color:#166534;
border:1px solid #86efac;
}
The status modifier sets background and border to convey meaning.
Use ARIA roles like role="status" where appropriate.
Consider ARIA roles for accessibility.
Navigation component
Combine patterns you learned in the navigation chapter with button styling for call-to-action links.
Component variations
- Use modifier classes (BEM naming) like
.card--compactfor variations. - Store component styles in separate files (
components/card.css,components/button.css). - Create documentation pages or a living style guide for your team.
If you want to read more or get an in-depth understanding, see CSS Templates and CSS Snippets in the CSS tutorial.
Accessibility tips
- Ensure focus styles are visible on interactive components.
- Use appropriate ARIA attributes where necessary (
role="alert",aria-live). - Provide sufficient color contrast and larger hit targets.
Review CSS Accessibility.
Component gallery demo
This demo renders a small gallery of components-button, alert, and card-so you can experiment with styles in one place.
Syntax highlights: composable classes (.btn variants), semantic alert roles, and a simple content card with spacing tokens.
Component gallery
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<a href="#" class="btn btn-primary">Primary button</a>
<div class="alert alert-info" role="status">Heads up! New updates available.</div>
<article class="card">
<h2>Reusable Components</h2>
<p>Bundle markup and styles into composable building blocks.</p>
</article>
</body>
</html>
body {
font-family:"Inter",sans-serif;
background:#f4f6fb;
margin:0;
padding:48px;
display:grid;
gap:24px;
}
.btn {
display:inline-block;
padding:10px 18px;
border-radius:999px;
text-decoration:none;
font-weight:600;
transition:0.2s ease;
}
.btn-primary {
background:#6366f1;
color:#fff;
}
.btn-primary:hover {
background:#4f46e5;
}
.alert {
border-radius:12px;
padding:14px 18px;
}
.alert-info {
background:#eff6ff;
color:#1d4ed8;
}
.card {
background:#fff;
border-radius:16px;
padding:24px;
box-shadow:0 20px 45px rgba(15,23,42,0.12);
}
.card h2 {
margin-top:0;
}
The gallery page uses spacing and shadows to separate components and demonstrates how base classes plus modifiers create consistent, reusable UI.
