At CloudCannon, we're big fans of the static web. And we love what the Astro team is building!
As more and more partner agencies are building client sites with CloudCannon, we wanted to help out by providing the foundations for Astro components that output static HTML and CSS, for the fastest delivery possible — all unbranded and adaptable for any project.
Frequently asked questions
How does the Component Starter work?
We give you straightforward building blocks without hiding anything behind layers of abstraction. You see everything that's happening, and stay in control.
What's included in the Component Starter?
Lean HTML, CSS, and small touches of vanilla JavaScript. No dead weight, no surprise dependencies, just the pieces you actually need to build great pages.
How is the Component Starter so fast?
Performance comes from keeping things lightweight. The framework handles image optimization and responsive patterns so your site stays quick without extra work.
Can I customize the Component Starter?
Every part of the Component Starter is meant to be opened, read, and edited. You shape it to fit your project instead of working around someone else's opinions. Start by browsing the components to see how they're set up!
Mix and match your components
With custom sections, you can create components for almost any use case.
First slide demonstration
Welcome to the carousel component
This initial slide introduces visitors to the rotating content display. You'll notice how the text hierarchy works with the eyebrow, headline, and body copy creating clear visual distinction. The component is designed to guide users through multiple messages without overwhelming the page.
Content transition example
Seamless navigation between slides
As you move to the second position, observe how the previous content gracefully exits while this new information appears. The navigation controls below allow users to move at their own pace. This slide exists purely to demonstrate the component's ability to handle sequential content delivery.
Third position showcase
Maintaining consistent formatting
By the third slide, the pattern becomes clear. Each rotation maintains the same structural hierarchy and spacing, ensuring visual coherence throughout the carousel. This consistency helps users understand what to expect as they progress through the available content.
Final slide
Completing the carousel loop
This fourth and final slide demonstrates how the component handles the end of its sequence. Users can either cycle back to the beginning or pause here to absorb the information. The carousel has now successfully shown its capacity to present multiple content blocks in a compact, navigable format.
This testimonial component has completely changed the way I present my quotations on Astro sites. I couldn't be happier with the results.
John Convincingname Founder
Our Team
Meet the people
We're a group of stock photography faces that fill out this team grid.
Alex Smith
Lead Developer
As a fictional representation of a real employee, I exist solely to demonstrate how profile information appears in this layout. My headshot is perfectly lit, and my description maintains the ideal length for this component.
Tom Rodriguez
Chief Technology Officer
I'm here to show how multiple team members look when displayed together. My expertise includes being professionally photographed and having exactly two sentences of biographical text.
Helen Kim
Head of Design
I demonstrate how the component handles a third profile entry. My carefully crafted placeholder text ensures the layout remains consistent, regardless of whether you're viewing on a tablet or desktop display.
Emily Watson
Director of Operations
I round out the team grid to demonstrate how the layout adapts to a fourth member. My presence here confirms that the component scales appropriately, maintaining visual balance across different screen sizes.
Form and function!
This is a sample form component, so it's not wired up with a target inbox yet, but it's all ready to configure with CloudCannon forms.
