Misc Blocks

Department – Info

Accordion

Accordion is a good way to segment content into sections on a page to help make it look less text heavy. Keeping in mind if there is a lot of content hidden, it still adds to the load time of a page.

Introduction
The standard intro section with Title, subtitle, content and alignment for the titles. These are optional.

Add/Edit Items

• Accordion items
  Each accordion is considered a row. Title is the clickable element, copy is the content within it.

Configuration

• Open First item
  If on the accordion set will default to having the first one open
• Block Wrapper
• used by marketing to apply custom CSS styles if needed. Used sparingly.
• Anchor ID
• You may assign this block a name, it will allow you to link to this block on the page with an anchor tag. (engineering.wisc.edu/pagename#AnchorID) If you use this please use a name that will be unique like cbe-news, also it is case sensitive and should not use spaces.

Video – Inline

Video highlights a video to be shown on the page without leaving the page.

• Background Image
  You may use a background image or a background pattern from configuration. Use caution if you use a background image, visually it may compete with the image of the video within the block.
• Title
• YouTubeID
  Use the ID of the youTube video here not the whole URL. https://youtu.be/QcPivi–MmI another example, https://www.youtube.com/watch?v=r_ekD9VO2aM

Configuration

• Heading Size
  Determines the importance level on the page, not the visual size of the title. h2, or h3 are mostly likely used.
• Block Wrapper
  used by marketing to apply custom CSS styles if needed. Used sparingly.
• Anchor ID
  You may assign this block a name, it will allow you to link to this block on the page with an anchor tag. (engineering.wisc.edu/pagename#AnchorID) If you use this please use a name that will be unique like cbe-news, also it is case sensitive and should not use spaces.
• Background
  Please use the background when it’s needed to break up the design on the page.
  Note: if you set a background and it does not fill the whole width of the page you need to set the block to full width.

Our students just don’t learn, they do.

Close Video

Our students just don’t learn, they do.

Close Video

Tabs

Tabs are a good way to segment content into sections on a page to help make it look less text heavy. Two things to keep in mind, 5-7 tabs is a good target number, more and the tabs will likely be to to wide on the page, also if there is a lot of content hidden, it still adds to the load time of a page.

Introduction
The standard intro section with Title, subtitle, content and alignment for the titles. These are optional.

Add/Edit Items

• Accordion items
  Each accordion is considered a row. Title is the clickable element, copy is the content within it.

Configuration

• Display bottom border
  Adds a line below the tabs to separate this block from blocks below it
• Block Wrapper
  used by marketing to apply custom CSS styles if needed. Used sparingly.
• Anchor ID
  You may assign this block a name, it will allow you to link to this block on the page with an anchor tag. (engineering.wisc.edu/pagename#AnchorID) If you use this please use a name that will be unique like cbe-news, also it is case sensitive and should not use spaces.

Photo Slider with content

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consectetur purus ut faucibus pulvinar elementum integer enim neque. Maecenas accumsan lacus vel facilisis volutpat est.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consectetur purus ut faucibus pulvinar elementum integer enim neque. Maecenas accumsan lacus vel facilisis volutpat est. Placerat duis ultricies lacus sed. Amet venenatis urna cursus eget nunc scelerisque viverra mauris. Adipiscing elit duis tristique sollicitudin nibh. Vel pharetra vel turpis nunc eget. Nullam ac tortor vitae purus faucibus. Ultrices tincidunt arcu non sodales. Ante metus dictum at tempor commodo. Id consectetur purus ut faucibus pulvinar. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Fames ac turpis egestas maecenas pharetra convallis posuere. Egestas maecenas pharetra convallis posuere. Ullamcorper sit amet risus nullam eget felis eget nunc. Accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Turpis massa sed elementum tempus egestas sed. Dignissim suspendisse in est ante in nibh. Ac odio tempor orci dapibus ultrices in iaculis nunc sed.

Ridiculus mus mauris vitae ultricies leo integer malesuada nunc. Lobortis mattis aliquam faucibus purus in massa tempor nec feugiat. Magna etiam tempor orci eu. Mauris sit amet massa vitae. Diam donec adipiscing tristique risus nec feugiat in fermentum.

Department – Info

This block is to be used as a secondary footer and has 4 parts to it. This is an <aside> element to set a proper landmark for accessibility.

Department
Name of the department will be set as a title

Contact Info
The address information on a single line with | between the lines, phone and email may be on second line.

Social Links
Assign the social channel and the proper link

Content
Used for additional information if wanted, such as suggestions link or Department leadership information.