# Block Types

These are the block types that Provus includes.

* [Accordion](#accordion)
* [Banner](#banner)
* [Short Banner](#short-banner)
* [Columns](#columns)
* [Files list](#files-list)
  * [List](#list)
  * [Table](#table)
* [Line separator](#line-separator)
* [Link Group](#link-group)
  * [4-card Featured](#4-card-featured)
  * [Link Group : Grid 3 : Square Card Image:](#link-group--grid-3--square-card-image)
  * [Grid 3 : Card Text Link w/ Icon:](#grid-3--card-text-link-w-icon)
* [Number Group](#number-group)
* [Person list](#person-list)
* [Photo Gallery](#photo-gallery)
* [Social feed](#social-feed)
* [Tabs](#tabs)
* [Text](#text)

To add a block to the layout of your page, you simply click ‘Layout’, then decide which section you want to add the block to, and at the bottom of that section select ‘Add Block’.

![image](https://user-images.githubusercontent.com/512243/95464482-fe608b00-0947-11eb-9ebd-604803dbbd4b.png)
![image](https://user-images.githubusercontent.com/512243/95464533-0f110100-0948-11eb-995a-d34d79eb7c4a.png)

Blocks are organized by type:

![image](https://user-images.githubusercontent.com/512243/95464720-48e20780-0948-11eb-8654-23dfe54159b4.png)

![image](https://user-images.githubusercontent.com/512243/95464833-6911c680-0948-11eb-8997-b4e12d2c893e.png)

This is a very brief description of each block type with a demonstration of the potential outcome:

## Accordion

* This allows for a verticle list of content that will expand when the title is clicked(also closes any currently expanded content).
* Can create new item or use existing item.
* Normally used for FAQ lists.

Example:

![image](https://user-images.githubusercontent.com/512243/95465544-47650f00-0949-11eb-8ba9-ea35dd482866.png)

## Banner

* Allows for a background image for a site banner
* You can also add a Logo image, Heading, Subheading, include a Search Block, and add an image of a Person

![image](https://user-images.githubusercontent.com/512243/95465836-9c088a00-0949-11eb-9f77-82f3dcf24682.png)

## Short Banner

* Allows for a background image for a site banner
* Only allows you to add a Heading or Subheading
* This is smaller to take up less real estate for users to start seeing other content easier

## Button

* Allows you to create a linked button to a URL
* The title ‘Test Button’ can be removed

## Columns

* This block allows up to three columns of either  text or media
* Can be new items or existing items

Title can be hidden

![image](https://user-images.githubusercontent.com/512243/95465952-c9553800-0949-11eb-872d-21d0cc95d326.png)

## Files List

* Allows you to create a ‘List’ or ‘Table' of links to files

* Files can be Audio, Document, or Image

### List:

![image](https://user-images.githubusercontent.com/512243/95466001-da05ae00-0949-11eb-8717-472e90f174a8.png)

### Table:

![image](https://user-images.githubusercontent.com/512243/95466028-e25de900-0949-11eb-9917-df93faa5b394.png)

## Line Separator

Creates a horizontal line to separate content

![image](https://user-images.githubusercontent.com/512243/95466100-f99cd680-0949-11eb-8dee-ce107fa3ba4e.png)

## Link Group

* This has many options and uses
* Allows for manual or automatically generated links in a variety of group options
* Automatic links could be ‘News’ or 'Articles' or a list of people, etc.
* Manually add content with links to either relative or absolute paths

Can be displayed as:

* Carousel - Horizontal list of items possibly with a scrolling arrow
* 4 Card Featured - Lists most recent 4 items with the newest being on the left in a larger format, and 3 on the right in a vertical list
* Column Row -
  * Grid 2, 3, or 4 - horizontal rows of items wrapping to a new line after selected number of items are displayed
  * Allows for a link after the group - could be used for a ‘View More’ button

![image](https://user-images.githubusercontent.com/512243/95466165-0e796a00-094a-11eb-82d3-60a2926c3f2c.png)

![image](https://user-images.githubusercontent.com/512243/95466287-2e109280-094a-11eb-8305-de2f13100c7d.png)

Some examples:

### 4 Card Featured:
![image](https://user-images.githubusercontent.com/512243/95466314-37016400-094a-11eb-8844-b92709cfdf25.png)


### Link Group : Grid 3 : Square Card Image:

![image](https://user-images.githubusercontent.com/512243/95466370-47b1da00-094a-11eb-80b7-715f16e9b18a.png)


### Grid 3 : Card Text Link w/ Icon:

![image](https://user-images.githubusercontent.com/512243/95466408-500a1500-094a-11eb-85d4-774546fe7357.png)


## Number Group

* Allows for a ‘By the Numbers’ group
* Uses icons and numbers with labels

![image](https://user-images.githubusercontent.com/512243/95466437-58625000-094a-11eb-90d8-dab3fcd9ef1d.png)

## Person List

* Creates a list of persons of a user-selected type

## Photo Gallery

* Creates a slide show of images

![image](https://user-images.githubusercontent.com/512243/95466534-6fa13d80-094a-11eb-880c-1aa0b961d7db.png)

## Social Feed

* Creates a block of the most recent posts of either Twitter, Facebook, or YouTube social media type
* Can be single, or multiple posts

![image](https://user-images.githubusercontent.com/512243/95466535-6fa13d80-094a-11eb-960c-56a89ffaaeb1.png)


## Tabs

* Can have one or two allowed groups(tabs) of content
* Can be a ‘Link Group’ or ‘Text’

Link group type follows same guidelines as previously described

![image](https://user-images.githubusercontent.com/512243/95466626-8778c180-094a-11eb-9046-0eafc10ebd13.png)


## Text

* Uses basic WYSIWYG editor for adding a text block to the node

![image](https://user-images.githubusercontent.com/512243/95466656-91022980-094a-11eb-90e2-7574ebed8d5f.png)

