HTML and CSS Reusable Components

Components are reusable chunks of markup and styles-cards, buttons, banners-that keep your design consistent and speed up development.

• 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.

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.

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.

Cards group related content with an image, heading, text, and a call-to-action.

Structure markup with semantic tags and utility classes.

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 .

Alerts surface inline feedback.

Pair a base .alert with status modifiers like .alert-success for color and borders.

The status modifier sets background and border to convey meaning.

Use ARIA roles like role="status" where appropriate.

Consider ARIA roles for accessibility.

Combine patterns you learned in the navigation chapter with button styling for call-to-action links.

• Use modifier classes (BEM naming) like .card--compact for 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.

• 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 .

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.

The gallery page uses spacing and shadows to separate components and demonstrates how base classes plus modifiers create consistent, reusable UI.