Our new Starter page components theme is a collection of over thirty web content components that came out of browsing through hundreds of websites! Components for your homepage, landing pages, blog, forms, and more.

Here’s what’s included in the theme. Different types of components serve different purposes but can be mixed and matched for different pages.

Feature sections

Skimmable sections for a homepage and landing pages.

• Single-column - in its most standard form, this consists of a headline, a description, usually kept short, an optional image, and an optional call-to-action button.
• Two-column - this can be a two-column version of the single-column consisting of title, description, image, and button. Or, an image can go on the left or the right side of the text and button.
• Three-column - same as a single-column, but times three! Icons or simple graphics can be used instead of squeezing in images, or no images at all can also work. A secondary style for buttons works best here, or a text link.
• Features grid - a listing of items, usually in multiple columns. If a call-to-action is used at all, it should either be in the form of text links for an item, or at the end of all the items.
• Call-to-action - standalone section focused on taking an actionable step. This works best at the end of a page to act as a next step, but for longer pages, it can also go in-between content sections.
• Testimonial - in the form of a quote followed by the author of the quote. A testimonial can be placed among other feature content sections, or as part of a section with multiple testimonials.

Article content

Ways to format content elements in an article.

• Titles and intro text - the main title of the article and subtitles used throughout the article. Summary or intro text is often used to give more context to the title.
• Bullet list - Providing a bullet list is a good way to make multiple points that are easier to digest their information and visually easier to read through.
• Image with caption - where it makes sense within the article, an image is added in-between the text. Either an illustration or photo.
• Pull quote - work well for highlighting certain ideas within an article that are particularly relevant.
• Callout - a callout makes a piece of content stand out from the rest of the text. It can often include an illustration or photo.

Listings

A series of related items like articles, products, and events.

• Article listings - would normally be part of an archive, on their own page, possibly with multiple pages for older posts. They would be ordered by date, with the latest posts at the top.
• Product listing grid - depending on the type of product and the number that an online store may have, the details for a product listing could vary. But usually a thumbnail, the title, and a price are most commonly shown.
• Event listings - An event listing would include the date, a title, and a link with info for how to attend the event. Events would also be ordered by date, but usually highlighting future events at the top, with the latest upcoming one first.
• People listing grid - team members for an about page, business directory, etc

Forms

Fields to collect information, for contact forms, surveys, etc.

• Landing page form - collect only info that is relevant to what your visitor is trying to accomplish; make it clear in your copy why the information is needed.
• Contact form - should consist of a text area for the question/comment message along with a means to reply back to the person reaching out.
• Feedback/survey - helpful for your product or service, allowing customers to share thoughts on their experience; questions can be in the form of multiple choices or as open-ended text areas.
• Newsletter sign-up - an email address is all you need for a newsletter sign-up, with a good intro explaining why users would want to sign up and what they can expect from the newsletter.

Navigation

Different menu types.

• Header - typically a horizontal bar across the top of your site, the most common place for your site’s primary navigation. It’s where visitors expect to look when deciding where to go on your site.
• Dropdown - you can provide dropdown submenus for your main menu items. This allows the visitor to dig deeper into each of the top level sections of your site and find content that may be more specific to what they’re looking for.
• Subnav - can also be added under the primary navigation once a visitor has clicked in to one of the pages of a particular section of the site. This allows them to see where they are and what related content they can continue to browse through.
• Sidebar - instead of at the top, a submenu can go on the side, in a vertical list. This works best when the list of submenu items gets long and those submenu items also have submenu items!
• Footer - for links to supplemental content you wouldn’t find elsewhere; additional categories of links, like social media; signup for your newsletter; or any needed legal copy.
• Buttons - standard call-to-action

You can download the Starter page components theme for free and start using it to design and build your own web pages.

The Starter page components theme is included with new Blocks Edit accounts. Sign up for free to start using it in the visual editor.