Common Blocks

Types of Common Blocks

This page dives into your common blocks, what they are for, and how you can use them. If you have any questions at all, please don’t hesitate to reach out to our team via live chat (weekdays 8 AM to 5 PM Pacific Time) or email at support@carrot.com.


Paragraph Block

Use the Paragraph Block to Add Content

A paragraph block is one of the most common blocks you will see. It is used for the bulk of your site’s main content. This block houses the paragraphs of your site. For example, you are currently reading content in a paragraph block.

Features & Styles:

  • Text Formatting – these can apply to phrases and words within the paragraph block
    • Alignment – left, center, rightBold, italic, link
    • More rich text editing (inline code, etc.)
  • Text Settings – these settings apply to all content within the block
    • Font sizes – (small, normal, large, larger)
    • Drop Cap toggle is a massive first letter indented with normal text following
  • Color Settings – Black, grey, white, and your branding colors are available
    • Background color of the block
    • Text color of all the text in the block
    • Learn how to update colors here
  • Advanced Settings – developers use this for custom markup (code)

Heading Block

Using the Heading Block for SEO and Emphasis

A heading block is one of the most common blocks you will see. Headings are used as large call-to-actions, titles, and to break up text into sections. Headings are also important for SEO and the sizes tell Google how important the text is. H1 is the most important and pages should have a single H1 heading, no more.

Features & Styles:

  • Heading Settings – these apply to the overall heading
    • Level: H1 – H6
      • H1 is the largest and should have 1 per page
      • H6 is the smallest
    • Alignment – left, center, right
  • Color Settings – Black, grey, white, and your branding colors are available
    • Color of all the text in the block
    • Learn how to update colors here
  • Advanced Settings – developers use this for custom markup (code)

Image Block

Insert Photos on the Page Using the Image Block

An image block is used to add an image to the page. Each image block displays one image.

Multiple images are added using a gallery block.

A wide or full-width image is best added using the cover block.

Features & Styles:

  • Styles – this is how the image is shaped on the page
    • Default = rectangle
    • Circle Mask = circle
    • Grayscale = black and white spectrum
    • Shadowed = places a shadow box around the image and caption
  • Image Settings
    • Alt Text – this text is read to someone using a screenreader
    • Image size allows you to change the dimensions
      • You can keep the original size or make it smaller
      • Images can not be made larger than the original
  • Advanced Settings – developers use this for custom markup (code)

List Block

Create a Simple List Using the List Block

This block is used to display text in a simple list format. List blocks can be bulleted or numbered lists.

Features & Styles:

  • Styles – you can select bullets or numbers
    • Default = regular text size
    • Large Numbers = large color circle around the number
      • color is your site’s primary color in the design
      • learn how to update colors here
  • Ordered List Settings – displays when you add a numbered list
    • Start Value determines the first number
    • Toggle to reverse the order as high to low
  • Advanced Settings – developers use this for custom markup (code)

Testimonial Block

Add Testimonials to Your Page Using the Testimonial Block

Testimonial blocks pull a testimonial from your content and display it in a bold format for emphasis.

You’ll use a quote block if you want to add a quote format for something that isn’t listed in your testimonials.

Features & Styles:

  • Testimonial
    • Choose one testimonial from the drop-down selection
    • Learn how to add a testimonial here
  • Advanced Settings – developers use this for custom markup (code)
Using the Gallery Block to Display Multiple Images

The gallery block displays multiple images side-by-side.

Learn how to add an image here

Features & Styles:

  • Gallery Settings
    • Choose one number of columns you want. This will be the number of images you have side-by-side
    • Crop images will crop the image to make the subject as large as possible
    • Link to allows someone to download the image using a page or link to the file
  • Advanced Settings – developers use this for custom markup (code)

Quote Block

Add an Emphasized Quote Using the Quote Block

Use a quote block if you want to add content manually, outside of the testimonials on your site. This block will display it in an emphasized format. The quote should be entered in that first block of content. Citation is the source of the quote.

You’ll use a testimonial block if you want to add a quote format using one of your testimonials.

Features & Styles:

  • Styles
    • Default = semi-large text size for quote
    • Large = large text size for quote
    • Note: left, center, and right alignment apply to both the quote and authorship
  • Advanced Settings – developers use this for custom markup (code)

Cover Block

Cover block video

Cover blocks are great for headings. They are an image or color section of the site, varying in width, that have a text overlay. Alignment can be set to left, middle, right, wide, and full-width. We love the full-width option when using this block.

You’ll want to use the Group Block if you want to add columns, images, or large paragraphs with a background color.

Features & Styles:

  • Text Settings – these settings apply to all content within the block
    • Font sizes – (small, normal, large, larger)
    • Drop Cap toggle is a massive first letter indented with normal text following
  • Color Settings – Black, grey, white, and your branding colors are available
    • Background color of the block
    • Text color of all the text in the block
    • Learn how to update colors here
  • Advanced Settings – developers use this for custom markup (code)

File Block

Adding Documents Using the File Block

File Blocks are great for files that should be printed. This can include applications or checklists. The display will show the title, a download button, and a link to copy the url, if the file link needs to be shared.  

Features & Styles:

  • Text Link Settings
    • Can link to the file or a page to download
    • Open in new tab will keep someone in the current window and open the file in another tab
  • Download Button Settings –
    • Can toggle on or off the download button
  • Advanced Settings – developers use this for custom markup (code)