Tab block

What do web editors use a tab block for?

Organizing a lot of information can also be achieved by using tabs. Think of tabs like old-school recipe cards: you would organize recipes behind a specific label. As a web editor, you can customize the label to cover specific topics so the user knows which tab they want to click on. Once a tab is engaged, the others will be greyed out as “behind” the selection This is a good option to organize 4 to 7 different categories.

Which layout can tab blocks be used in?

Accordion blocks can be used in a one column layout. They are not allowed to be on sections with a coloured background.

Who can use tab blocks?

Super Builders can create and edit accordion blocks. Builders can edit existing accordions but cannot create new ones.

Tab block tutorial Tab block example

Tab block tutorial

Step-by-step instructions

  1. Navigate to the existing Tab block on the page, click on the pencil icon and click on configure.
  2. Title: This is an administrative title that will be used to identify the block and not displayed on the website. 
  3. Header: The is an optional field to display a header above the text grid items. 
    • Header will be set as an H2 by default but you have the option to change it. Note: Only use H1 if this is being used as a header/title for the page. H2 for any section header. H3 to break up content within the section. Never mix and match header sizes, this will confuse screen readers and make the site less accessible.
    • You will have a choice of heading colours depending on the choice of background colour selected. 
  4. Tabs:
    • Tab Title: This is the field that will display as the title of the tab section for the user to click on to expand the item.
    • Columns: This is where you can select the text grid to be auto formatted into one to four columns.
    • Divider: Option to add a divider line at the bottom of each text grid item.
    • Text Grid: This is where you will add the text grid items. Each text grid item will allow you to add a header, body and button and will display in columns if you selected columns above.
      • Header: Optional header field within the text grid that will display above the body.
        • Header will be set as an H2 by default. Note: If you used a Header above the text grid items you will want to change this header to an H3.
      • Body: This is an optional field to display a chunk of text using a WYSIWYG (what-you-see-is-what-you-get) text editor where you can type or copy paste text into. If you copy paste make sure you always clean the formatting after you paste. Do this by highlighting the text and clicking on the clear formatting icon (Tx) on the top ribbon.  This will remove any unnecessary formatting copied over from a word doc or pdf file.
      • Button: This is where you have the option to add up to four buttons. Style options will change depending on the background colour chosen. 
        • For internal links: start typing the name of the page or media item (pdf) in the URL field and select the page you want to link to.
        • For external link: copy paste the external link.
        • Type in the link description into the link text field.
        • For external links or pdf files: click on attributes and select new window for the target.
      • Add another text grid item to add another item to this tab section or select to create a new tabbed section as text grid or accordion items. 
  5. Click on "Update" to save the block.

Tab block example

Header inside the tab (H3)

This is just placeholder text. Don't be alarmed, this is just here to fill up space since your finalized copy isn't ready yet. Once we have your content finalized, we'll replace this placeholder text with your real content.

Sometimes it's nice to put in text just to get an idea of how text will fill in a space on your website.

Traditionally our industry has used Lorem Ipsum, which is placeholder text written in Latin. Unfortunately, not everyone is familiar with Lorem Ipsum and that can lead to confusion. I can't tell you how many times clients have asked me why their website is in another language!

There are other placeholder text alternatives like Hipster Ipsum, Zombie Ipsum, Bacon Ipsum, and many more. While often hilarious, these placeholder passages can also lead to much of the same confusion.

If you're curious, this is Website Ipsum. It was specifically developed for the use on development websites. Other than being less confusing than other Ipsum's, Website Ipsum is also formatted in patterns more similar to how real copy is formatted on the web today.

Example button