Text Based Components

Accordion

Click on the orange titles below and watch as the details expand and collapse. This component is very useful for "Frequently Asked Questions" sections on a webpage.

There are 2 types of accordions:

  • Accordion Dropzone allows you to put other components within the hidden area
  • Accordion Item only allows text to go in the hidden area
Accordion Dropzone

The accordion dropzone component creates another dropzone for other components to exist within the accordion. So you can use the background area component, like this, to add a cool texture to the background.

Accordion Item

Accordion Item Details

Contact Information

This component is frequently used to display a department's or office's contact information.

Department's Title

Department's Address
Bowling Green, OH

419-352-0000
bgsu@bgsu.edu
www.bgsu.edu

This is some additional information added to the end. It could be office hours or other related info.

Callout Box

Callout Box Title

This component allows you to have an image, title, description, and a call to action link. This is frequently used as a teaser for news stories and will link to the full story on a different page.

Countdown Clock

Dropdown

Title for Dropdown

Form Container

You must first place a form container on a page to get access to the form components. Once it is placed on the page, the component options will appear in the "BGSU Forms" section in the sidekick.

Form Title

Checkbox Group:

Users can pick multiple options.

Radio Button Group:

Users can only pick one option.

Section/Group Container Title

Heading with Icon

Choose icons for headings 2 through 6

List

In the list component you can create a list of items based on different criteria. Below the list is built using the tag "News" and is displayed as news, so the list items include the headline, description, and on Time date of the most recent three articles tagged with "News"

Staff Profile

This component is used to create headings 1 through 4.

rogers-small

Person's Name

  • Position: Person's Position
  • Phone: Person's Phone Number
  • Email: Person's Email Address
  • Address: Person's Work Address

This is some additional information added to the end. It could be a person's biography or information on conducted research.

Table - Responsive

Header 1 Header 2 Header 3
Content 1.1 Content 2.1 Content 3.1
Content 1.2 Content 2.2 Content 2.3
Content 1.3 Content 2.3 Content 3.3

Table - Sortable/Searchable

Column 1
Column 2
Column 3
Row 1 Column 1Row 1 Column 2Row 1 Column 3
Row 2 Column 1Row 2 Column 2Row 2 Column 3
Row 3 Column 1Row 3 Column 2Row 3 Column 3

Text

Format:

The sole purpose for headings is to designate a hierarchy of importance, so that human readers, search engines, screen readers, and more can easily determine which content is most critical (Heading 2) and least critical (Heading 6).

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph content

BLOCK QUOTE is a format that should be used for lengthier quotes to differentiate the quote from the other text in the text component.

Style:

[None]

Intro Text

Button Gray

Button Orange

Gray H1-H6 - Heading 2

Gray H1-H6 - Heading 3

Gray H1-H6 - Heading 4

Gray H1-H6 - Heading 5
Gray H1-H6 - Heading 6


Footnote Disclaimer

Pull Quote Right

For a PULL QUOTE RIGHT, you are able to style text to look like a quote and align it to the right side of the text component. When used correctly it is very effective. It also allows text to wrap around the quote just like this, making the flow of the writing very easy to follow.

Pull Quote Left

For a PULL QUOTE LEFT, you are able to style text to look like a quote and align it to the right side of the text component. When used correctly it is very effective. It also allows text to wrap around the quote just like this, making the flow of the writing very easy to follow.

Orange Highlight

Brown Highlight

Tabs

This component allows you to organize information into different sections where the content will be hidden until the user clicks on the accompanying tab

Tab one information

You can also put any component you want inside of the tabs component. For example, the image component is used below.

BGSU-Seal

Tab two information

You can also put any component you want inside of the tabs component. For example, the accordion component is used below.

Accordion Item Title

Accordion Item Description

Tab three information

You can also put any component you want inside of the tabs component. For example, the dropdown component is used below.

Title for Dropdown

Titled Container

This component is allows you to create a container for multiple components and apply a title. This is frequently used to organize long areas of text.

Title for Container

The nice thing about this component is that it will group all components inside and make them very easy to move around.

BGSU-Seal

Orange Background

Brown Background

* CMS-Guide.pdf
For accessibility reasons, you should always provide a description as to what the file is if the title is not descriptive enough.

Text with Separator

This component is used to create all the component title on this page. It allows you to place a horizontal line either above or below the title.

Text & Image

university-seal

This components allows you to put text and image in the same component with all capabilities of the text component and the image component.

Title

This component is used to create headings 1 through 4.

Heading 3

Tool List Selector

This component allows you to create up to six buttons with icons.

Item 1
Item 2

Video with Paragraph

Title for Video with Paragraph

This component allows you to add a paragraph of text to the right of a Youtube or Vimeo video.

CMS Contact

419-372-2378

If you have any issues or questions; please fill out our Web Questions/Concerns form.

News Slideshow

This component allows you to build a rotating slideshow of Callout Boxes. If you want to learn how to make them, please watch the Picture/Page Banner/News Slideshow Tutorial on our Training Videos page.

Demetria's Story

Demetria's Story

Demetria Graham is dedicated to helping others achieve their fitness goals through Group X.

Read More
HIV TESTING

HIV TESTING

Testing service is completely free and confidential at the Wellness Connection.

Read More
Andrew Kuebeck, Personal Training Testimonial

Larissa's Story

Larissa Leck, Recreation and Wellness Lifeguard Class Participant, shares her success story. 

Read More
Late Night at the Perry Field House

Late Night Programming

Have fun throughout the year at RecWell Late Night activities.

Read More

Updated: 07/23/2020 01:08PM