Login Explore components

The visual builder library

Free builder presets.
Ready to customise.

Browse existing free presets, customise them visually and export supported code within your Free or Pro plan limits. These are visual builder presets, separate from standalone downloads.

Explore builder presets Try the builder

Browse without an account. Sign up when you’re ready to save and export within your plan limits.

Real built-in presets Code for your own projects

Component export React

export default function Hero() {
  return (
    <section>
      <h1>Your next idea.</h1>
      <p>Make it your own.</p>
    </section>
  );
}

A starting point for your own code

Choose a preset. Customise visually. Export your component.Illustrative editor and code preview

Find the right piece

A component for the details that matter.

Explore each component’s existing preset browser, or search the visual collection below.

Hero

Landing sections with actions and messaging.

39 visible presets

Navbar

Navigation bars and menu layouts.

30 visible presets

Button

Calls to action, inline actions and clickable states.

10 visible presets

Form

Sign-up, contact and data-entry layouts.

28 visible presets

Feature Grid

Feature sections, value cards and marketing grids.

39 visible presets

Card

Flexible containers for grouped content and actions.

29 visible presets

Banner

Hero strips, alerts and announcement sections.

23 visible presets

Accordion

Expandable FAQs and disclosure content.

30 visible presets

List Group

Stacked items, grouped links and simple lists.

30 visible presets

Testimonial

Quotes, reviews and social-proof layouts.

28 visible presets

Badge

Small labels, statuses and compact markers.

16 visible presets

Rating

Rating blocks and visual feedback UI.

15 visible presets

Avatar

Profile images, initials and identity blocks.

11 visible presets

Icon

Icon elements and decorative symbols.

10 visible presets

Browse. Inspect. Make it yours.

Start with a real design.

These previews come from the same preset data used by the builder.

Open the builder

338 matching presets

Showing 316–324 · Page 36 of 38

Hero · Free preset

Gaming Launch Hero

Extra hero preset for gaming, launch, trailer pages that do not belong to a template pack.

Inspect preset

This is a static HTML/CSS preview. Interactive behaviour is available in the builder.

Open in builder

Navbar · Free preset

Floating Marketing Navbar

Floating marketing navbar for campaign pages, launches, and lead generation.

Inspect preset

This is a static HTML/CSS preview. Interactive behaviour is available in the builder.

Open in builder

Feature Grid · Free preset

Conversion Benefits Grid

A flexible benefits grid for campaign pages, landing pages, and conversion-focused sections.

Inspect preset

This is a static HTML/CSS preview. Interactive behaviour is available in the builder.

Open in builder

Accordion · Free preset

Generic Service FAQ

Flexible service FAQ for uncategorised business sections and simple landing pages.

Inspect preset

This is a static HTML/CSS preview. Interactive behaviour is available in the builder.

Open in builder

List Group · Free preset

Booking Requirements List

A useful pre-form checklist for appointments, bookings, and enquiries.

Inspect preset

This is a static HTML/CSS preview. Interactive behaviour is available in the builder.

Open in builder

Hero · Free preset

Esports Team Hero

Extra hero preset for esports, team, tournament pages that do not belong to a template pack.

Inspect preset

This is a static HTML/CSS preview. Interactive behaviour is available in the builder.

Open in builder

Feature Grid · Free preset

Trust Signal Grid

A credibility grid for awards, guarantees, reviews, and customer confidence.

Inspect preset

This is a static HTML/CSS preview. Interactive behaviour is available in the builder.

Open in builder

Hero · Free preset

Creator Portfolio Hero

Extra hero preset for portfolio, creator, personal brand pages that do not belong to a template pack.

Inspect preset

This is a static HTML/CSS preview. Interactive behaviour is available in the builder.

Open in builder

Feature Grid · Free preset

Founder Story Grid

A personal-brand grid for founder profiles, indie makers, and creator-led pages.

Inspect preset

This is a static HTML/CSS preview. Interactive behaviour is available in the builder.

Open in builder

Static, isolated previews. Some images require a network connection; interactions are disabled here. Open a preset in the builder to customise it.

Your next step

From a starting point to your own component.

01Browse & inspect
Choose a component and take a closer look at a real preset.
02Customise visually
Open it in the existing builder and adjust content, layout and responsive styles.
03Save & export
Use your account to save work and export supported code within Free or Pro limits.

Visual Builder Presets | ElementYard