Text Section Components | Refoundry Low-Code Visual Site Builder

Text Sections

Refoundry’s responsive text section component blocks are layouts prebuilt to showcase readable, visually appealing web copy – with or without accompanying images.

Intro – Center

This component has short, centered text. It comes prebuilt with a heading and room for a couple of sentences. This content block is good for intros to sections or intros to pages, because it gives you a clean, concise space to set the tone, explain the content to follow, and utilize keywords if applicable. It works well at the top of a page below the header if it’s being used as an intro to the whole page, for example, providing a little brand storytelling or differentiator content, and giving the user a reason to keep scrolling. It also works well mid-page to introduce a new section, especially one that is visual and would benefit from context. Examples are adding an intro over a logo grid, a gallery, a video, an accordion, or sections on a Team page that is divided up by role or level of employment.

Purus Vestibulum Ullamcorper Vehicula Sit

Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.

Intro – Left

This component has short, left-aligned text and a button. It comes prebuilt with a heading, a subheading, room for a couple of sentences, plus a customizable button with text overlay for CTA microcopy. This content block is good for intros to sections or intros to pages, because it gives you a clean, concise space to set the tone, explain the content to follow, and add a CTA button. It works well mid-page to introduce a new section, especially one that is visual and would benefit from context. Examples are adding an intro over a post loop (using the CTA button to “view all” posts), a logo grid (using the CTA button to view a page with all funders, partners, certifications, clients, etc.), or any other content for which you want to display a teaser and guide the user to another page. Alternatively, the CTA button could be used to link an associated PDF file that’s relevant to the page or section.

Purus Vestibulum Ullamcorper Vehicula Sit

Pharetra Ridiculus Elit

Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.

Button text

Intro – Left Simple

This component has short, left-aligned text. It comes prebuilt with a heading, a subheading, and room for a couple of sentences. Other than alignment, it functions the same as the Intro – Center component. This content block is good for intros to sections or intros to pages, because it gives you a clean, concise space to set the tone, explain the content to follow, and utilize keywords if applicable. It works well at the top of a page below the header if it’s being used as an intro to the whole page, for example, providing a little brand storytelling or differentiator content, and giving the user a reason to keep scrolling. It also works well mid-page to introduce a new section, especially one that is visual and would benefit from context. Examples are adding an intro over a logo grid, a gallery, a video, an accordion, or sections on a Team page that is divided up by role or level of employment.

Purus Vestibulum Ullamcorper Vehicula Sit

Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.

Intro – Full

This component has short, left-aligned text and a right-aligned button. It comes prebuilt with a heading, a subheading, room for a couple of sentences, plus a customizable button with text overlay for CTA microcopy. The difference between this component and Intro – Left is that it takes up the entire width of the screen, while Intro – Left is only 4 columns wide. Otherwise, they function the same way. This content block is good for intros to sections or intros to pages, because it gives you a clean, concise space to set the tone, explain the content to follow, and add a CTA button. It works well mid-page to introduce a new section, especially one that is visual and would benefit from context. Examples are adding an intro over a post loop (using the CTA button to “view all” posts), a logo grid (using the CTA button to view a page with all funders, partners, certifications, clients, etc.), or any other content for which you want to display a teaser and guide the user to another page. Alternatively, the CTA button could be used to link an associated PDF file that’s relevant to the page or section.

Purus Vestibulum Ullamcorper Vehicula Sit

Pharetra Ridiculus Elit

Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.

Button Text

Text – Image Left – Standard

This component has an image on the left and text on the right. The text column comes prebuilt with a heading, subheading, and room for two paragraphs. This content block is good for content that has a descriptive or supporting image, or a rich format for highlights. It works well at the top of a page to make it immediately visually engaging, or mid-page to support brand storytelling or break up more text-heavy sections. Alternating Text-Image Right and Text-Image-Left sections draws the eye in a “Z” pattern that matches how users scan content.

Purus Vestibulum Ullamcorper Vehicula Sit

Pharetra Ridiculus Elit

Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id.

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes.

Text – Image Right – Standard

This component has an image on the right and text on the left. The text column comes prebuilt with a heading, subheading, and room for two paragraphs. This content block is good for content that has a descriptive or supporting image, or a rich format for highlights. It works well at the top of a page to make it immediately visually engaging, or mid-page to support brand storytelling or break up more text-heavy sections. Alternating Text-Image Right and Text-Image-Left sections draws the eye in a “Z” pattern that matches how users scan content.

Purus Vestibulum Ullamcorper Vehicula Sit

Pharetra Ridiculus Elit

Text – Image Left – Button

This component has an image on the left and text on the right, with a CTA button in the same column as the text. The text column comes prebuilt with a heading, subheading, and room for two paragraphs, plus a customizable button with text overlay for CTA microcopy. This component block is great for calling out other pages on the site in a longer format than a standard callout, for example encouraging homepage visitors to view the About pages and subpages like Team, Community, and Sustainability. It also functions well for configuring featured content, like an upcoming event, a project, a blog post, a new product, or an announcement. It looks good at the top or the middle of any page.

Purus Vestibulum Ullamcorper Vehicula Sit

Pharetra Ridiculus Elit

Button Text

Text – Image Right – Button

This component has an image on the right and text on the left, with a CTA button in the same column as the text. The text column comes prebuilt with a heading, subheading, and room for two paragraphs, plus a customizable button with text overlay for CTA microcopy. This component block is great for calling out other pages on the site in a longer format than a standard callout, for example encouraging homepage visitors to view the About pages and subpages like Team, Community, and Sustainability. It also functions well for configuring featured content, like an upcoming event, a project, a blog post, a new product, or an announcement. It looks good at the top or the middle of any page.

Purus Vestibulum Ullamcorper Vehicula Sit

Pharetra Ridiculus Elit

Button Text

Text – Image Left – Full Width

This component has an image on the left and text on the right, with a CTA button in the same column as the text. The image and text use the full width of the page without padding on the sides. The text column comes prebuilt with a heading, subheading, and room for two paragraphs, plus a customizable button with text overlay for CTA microcopy. This component block is great for calling out other pages on the site in a longer format than a standard callout, for example encouraging homepage visitors to view the About pages and subpages like Team, Community, and Sustainability. It also functions well for configuring featured content, like an upcoming event, a project, a blog post, a new product, or an announcement. It looks good at the top or the middle of any page.

Purus Vestibulum Ullamcorper Vehicula Sit

Pharetra Ridiculus Elit

Button Text

Text – Image Right – Full Width

This component has an image on the right and text on the left, with a CTA button in the same column as the text. The image and text use the full width of the page without padding on the sides. The text column comes prebuilt with a heading, subheading, and room for two paragraphs, plus a customizable button with text overlay for CTA microcopy. This component block is great for calling out other pages on the site in a longer format than a standard short callout, for example encouraging homepage visitors to view the About pages and subpages like Team, Community, and Sustainability. It also functions well for configuring featured content, like an upcoming event, a project, a blog post, a new product, or an announcement. It looks good at the top or the middle of any page.

Purus Vestibulum Ullamcorper Vehicula Sit

Pharetra Ridiculus Elit

Button Text

Text – Image Background

This component has a full-width image in the background, with text and a CTA button on top in the left column, on top of the image. The text section comes prebuilt with a heading, subheading, and room for one paragraph, plus a customizable button with text overlay for CTA microcopy. This component block is great for the same kinds of text as the left- and right- image blocks (ie. it’s good for calling out other pages on the site in a longer format than a standard short callout). It also functions well for breaking up sections with plain-colored backgrounds. The key difference is if you have an attractive horizontal shaped photo that accompanies your text, and you want to set it as a background instead of a vertical image to one side of the text – this is the component to use. It looks good at the top or the middle of any page.

Purus Vestibulum Ullamcorper Vehicula Sit

Pharetra Ridiculus Elit

Button Text

Text – 2 Col Section

This component has a heading, a subheading, and two columns of text with room for three paragraphs. The text in the left column uses Intro styling, so it is slightly larger and more impactful than the Body-styled text in the right column. This component block is useful for brand storytelling in a more visually engaging way than a single paragraph, such as presenting your mission and vision, as the introduction to a page or section, or as part of a project or case study post. It looks great at the top of a page, but can also work well in the middle of the page.

Purus Vestibulum Ullamcorper Vehicula Sit

Pharetra Ridiculus Elit

Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est.

Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo.

Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor.

Text – Overview

This component provides a text layout ideal for introducing the topic of a page, or a new section on a page. It comes prebuilt with a heading, subheading, and two short paragraphs of text. This component block is useful for adding short brand storytelling elements to a page between large photos or videos, providing context above any media (such as photos, video, icons, logos, etc.), or as the introduction to a page or section. It works well at the top, middle, or near the bottom of any page, especially if it has another component block under it.

Purus Vestibulum Ullamcorper Vehicula Sit

Pharetra Ridiculus Elit

Text – 2 Col Details

This component is like an elevated bullet list, and is great for making highlights, features, or other points stand out from regular text. It has a main heading and subheading, two paragraphs of text in the left column, a subheading on the right column, and a customizable bullet list under the subheading in the right column. This component block is useful for brand storytelling in a more visually engaging way than a single paragraph, such as presenting a product, service, program, or area of expertise with an accompanying list of features, highlights, or key points to note. The bullet list can also include internal or external links, so you can really use this component block as a roundup to showcase anything. It looks great at the top of a page or in the middle of a page.

Purus Vestibulum Ullamcorper Vehicula Sit

Pharetra Ridiculus Elit

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla.

Optional Subheadline

Etiam porta sem malesuada magna mollis euismod.
Fusce dapibus, tellus ac cursus commodo.
Curabitur blandit tempus porttitor.
Vestibulum id ligula porta felis euismod semper.

Ready to go Pro?

Buy Refoundry Pro and gain access to powerful tools like this Component Library as well as Reusable Component Blocks, Animations & Parallax, and Custom Fields.

Buy Refoundry Pro Book a Demo