Block library
Welcome the the website block library. Use this section to help decide which blocks to use and learn how to use them.
What are blocks?
Blocks are the elements you put on basic pages to hold webpage content like text, pictures, links and more. Choose a block based on what kind of content you have for the page and the experience you want for the website user.
Types of blocks
Text
This basic block includes space for a header and body of text. You can tailor the heading according to accessibility needs and how prominent the information should be.
Call to Action (CTA)
This is a handy block that includes a header, text field and button - making it an easy way to signal to the user that there is an action they can take.
Text with link
This block is similar to the text block, in that it has a header and body of text. In addition, there is a field where you can paste a URL, and it will create a link that is automatically spaced nicely below the paragraph of text.
Text with Image
When you have some text that goes well with an image, then the text with image block is the way to go. You get fields to edit a header and the text body, in addition to a place to add media like an image.
Text grid
A text grid is a great way to organize information that involves user choices. You can provide a header, brief description of the choice or selection and a button to help the user understand their selection. This block automatically lines up the section headers and spaces the rows and columns to create a grid effect. You can choose how many columns (2-4) you want in the grid and whether or not you want a line between the rows.
Text with collapse
This block is similar to Text with Link, except that you will see a + symbol and some words. When clicked, the + symbol flies open a section of text that had been “collapsed” within. This is good for a section where you have a lot of text and don’t want to make the user scroll through lots of information before getting to the next section.
Useful links
Sometimes you just need to provide a series of links to the user, so they know additional options to click on. This block allows you to create a bulleted list of links -- if you have a lot, they can run over multiple columns as well.
Buttons
Some layouts require having a call-to-action underneath or beside other elements. For this, you can use the button block. Adding multiple buttons will automatically space and arrange the buttons in to the section for you.
Image
Image blocks allow you to place a photo in a specific spot on the page. There are some restrictions with image blocks, though: you can’t have a photo take up a full one-column section.
Logo
Similar to the image block but the logo block will not crop the image to a constrained size. It will resize the image to the column width instead of cropping the image.
Cards
Cards include a photo, subheading and text inside a box, or “card,” which can be stacked next to others to show an array of program/service options to the user. Cards provide visual and text indicators to help a user make decisions.
Video
Embedding multimedia into webpages has never been easier! Use the video block and you can easily paste in a YouTube or Vimeo link and it will be embedded on the page.
Staff
Staff blocks become a container on the page for staff names and contact information. The block pulls content in automatically from the names that you input manually. You can organize the people by dragging and dropping their names in the configure mode.
Carousel Simple
Carousels are a good way to introduce a variety of optional information to a user. It’s important to understand that a web user may/may not review all items in a carousel, so vital information or critical details are best to include in a different block on the page.
Accordion
When there is a lot of text to put on a page, organizing the material into items that can be condensed down into easily digestible sections. Accordions are an easy and user-friendly way to help a user select the information they need without overwhelming them with a lot of text. Text is tucked into accordion “folds,” which fly open when a user clicks on the accordion title. Accordions also close when a user clicks on the title a second time. These can be very beneficial for a FAQ format, when there are specific categories of products or services, and additional uses.
Tabs
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.
