Skip to Content

Component Examples

This page has a listing of basic component. Special components are displayed on other pages. This is an example of the text Componet. This component does not have an image in it.

Accordion Component

1.3.0 Accordion Updates

Accordion color matches site theme color by default.

Drop zone option added gives authors ability to place other components into the collapsable area.

Padding and margins were adjusted

1 Accordion color matches site theme color by default.
2 Drop zone option added gives authors ability to place other components into the collapsable area.
3 Padding and margins were adjusted
4 When Accordions have the drop zone enabled, then it will always be expanded under edit and designs modes. Switch to preview or disabled modes to see the accordion collapse.

Components that may be dropped into Accordion

  • /apps/michigan-lsa/components/captioned_image
  • /apps/acs-commons/components/content/definition-list
  • /apps/foundation/components/image
  • /apps/michigan-lsa/components/table
  • /apps/wcm/foundation/components/text
  • /apps/wcm/foundation/components/textimage
  • /apps/wcm/foundation/components/title

Button

Floated Buttons

Buttons in Responsive Columns

External

Mostly used to embed forms like Google Forms and Qualtrics Form. Can also be used to embed Vimeo videos. CAUTION: Embedded items will in almost every case break the page layout on mobile devices

Note: Set only the height to allow the external component flow with the width of the page.

Text & Image

NAMED M-WRITE PROGRAM
($1M endowed)

M-Write has proven to be effective in large, entry-level courses, but additional support is needed to make this critical initiative sustainable. To ensure this program continues to grow and benefit more undergraduates, we need resources for a dedicated staff member who will focus on expanding the M-Write program and help foster personal, engaged learning for more U-M students

Table - Every Other Row Shaded

Header 1 Header 2
Header 3
Horizontal Left Horizontal Center Horizontal Right

Vertical Top

 

Vertical Middle Vertical Bottom
Merged Cells (Right Click in Cell) - Vertical Baseline

Table - Shaded Hover Row

Header 1 Header 2
Header 3
Horizontal Left Horizontal Center Horizontal Right

Vertical Top

 

Vertical Middle Vertical Bottom
Merged Cells (Right Click in Cell) - Vertical Baseline