6-page-content-elements edit

alert  edit

H5 Alert box examples
Testing H5 as alert box

Example of p.alert. If you are a faculty member, staff member, or student who needs an ADA accommodation, please see the information below. As we are operating under a COVID-19 environment, the university recognizes the need for increased flexibility for faculty, staff, and students. Some individuals with disabilities who did not previously seek ADA accommodations, may need support or assistance during this time. The university also recognizes that those with current accommodations may have changing needs. We are here to help.

Example of blockquote.alert. Faculty who need assistance with online course preparation can contact the Studio for Teaching and Learning. The STL team is also available to assist faculty with accessibility features relating to Blackboard, Panopto and Zoom. Email the [[keepteaching,Keep Teaching Team]] for assistance.
H6.content_button.alert
Example of span.alert. Faculty who need assistance with online course preparation can contact the Studio for Teaching and Learning. The STL team is also available to assist faculty with accessibility features relating to Blackboard, Panopto and Zoom. Email the [[keepteaching,Keep Teaching Team]] for assistance.
H5.alert
  • Example of ul.alert. Faculty who need assistance with online course preparation can contact the Studio for Teaching and Learning.
  • The STL team is also available to assist faculty with accessibility features relating to Blackboard, Panopto and Zoom.
  • Email the [[keepteaching,Keep Teaching Team]] for assistance.
H6.alert
  • Example of ul.alert. Faculty who need assistance with online course preparation can contact the Studio for Teaching and Learning.
  • The STL team is also available to assist faculty with accessibility features relating to Blackboard, Panopto and Zoom.
  • Email the [[keepteaching,Keep Teaching Team]] for assistance.

Text between alert boxes.

Testing H6 above alert boxes
Testing H6 as alert box
Katherine Rowe at the Future of Work forumExample of span.alert. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.

Katherine Rowe at the Future of Work forumExample of p.alert. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Nemo enim ipsam voluptatem quia.

Example of p.alert. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Nemo enim ipsam voluptatem quia.

Copy
Edit
<!-- components/6-page-content-elements/alert.php --> <h5>H5 Alert box examples</h5> <h5 class="alert">Testing H5 as alert box</h5> <p class="alert"><em>Example of p.alert</em>. If you are a faculty member, staff member, or student who needs an ADA accommodation, please see the information below. As we are operating under a COVID-19 environment, the university recognizes the need for increased flexibility for faculty, staff, and students. Some individuals with disabilities who did not previously seek ADA accommodations, may need support or assistance during this time. The university also recognizes that those with current accommodations may have changing needs. We are here to help.</p> <p class="alert"><button class="button">button.button</button></p> <blockquote class="alert"><em>Example of blockquote.alert</em>. Faculty who need assistance with online course preparation can contact the <a href="/offices/stli/index">Studio for Teaching and Learning</a>. The STL team is also available to assist faculty with accessibility features relating to Blackboard, Panopto and Zoom. Email the [[keepteaching,Keep Teaching Team]] for assistance. </blockquote> <h6 class="content_button alert">H6.content_button.alert</h6> <span class="alert"><em>Example of span.alert</em>. Faculty who need assistance with online course preparation can contact the <a href="/offices/stli/index">Studio for Teaching and Learning</a>. The STL team is also available to assist faculty with accessibility features relating to Blackboard, Panopto and Zoom. Email the [[keepteaching,Keep Teaching Team]] for assistance. </span> <h5 class="alert">H5.alert</h5> <ul class="alert"> <li><em>Example of ul.alert</em>. Faculty who need assistance with online course preparation can contact the <a href="/offices/stli/index">Studio for Teaching and Learning</a>. </li> <li>The STL team is also available to assist faculty with accessibility features relating to Blackboard, Panopto and Zoom. </li> <li>Email the [[keepteaching,Keep Teaching Team]] for assistance.</li> </ul> <h6 class="alert">H6.alert</h6> <ul class="alert"> <li><em>Example of ul.alert</em>. Faculty who need assistance with online course preparation can contact the <a href="/offices/stli/index">Studio for Teaching and Learning</a>. </li> <li>The STL team is also available to assist faculty with accessibility features relating to Blackboard, Panopto and Zoom. </li> <li>Email the [[keepteaching,Keep Teaching Team]] for assistance.</li> </ul> <p>Text between alert boxes.</p> <h6>Testing H6 above alert boxes</h6> <h6 class="alert">Testing H6 as alert box</h6> <span class="alert"><img class="photoleft" alt="Katherine Rowe at the Future of Work forum" height="166" src="<?php echo $asset_url; ?>/about/administration/president/images/thinking-forward/rowe-at-work-forum.jpg" width="250"><em>Example of span.alert</em>. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</span> <hr> <p class="alert"><img class="photoright" alt="Katherine Rowe at the Future of Work forum" height="166" src="<?php echo $asset_url; ?>/about/administration/president/images/thinking-forward/rowe-at-work-forum.jpg" width="250"><em>Example of p.alert.</em> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Nemo enim ipsam voluptatem quia.</p> <p class="alert"><em>Example of p.alert.</em> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Nemo enim ipsam voluptatem quia.</p>
Copy
Copy
Edit
/* scss/6-page-content-elements/_alert.scss */ .user_content, .user_content_styles { .alert, .collapsible .alert { display: block; overflow: auto; margin: 0px; padding: 20px; background: var(--color-wmsilver-0); a { color: var(--color-link-dark); } + .alert { margin-top: 0 !important; padding-top: 0; } + :not(.alert) { margin-top: 2rem; } + hr { margin-top: kspaces(lg) !important; } & .photoleft { float: left; clear: left; margin: 0; padding-top: 8px; padding-right: 22px; padding-left: 0; @include breakpoint($mobile-to-desktop-breakpoint) { //padding-right: 0; } } & .photoright { float: right; clear: right; margin: 7px 0 0 0; padding-top: 0; padding-right: 0; padding-left: 22px; @include breakpoint($mobile-to-desktop-breakpoint) { //padding-left: 0; } } } .collapsible .alert:last-child { margin-bottom: $md-content-margin; } h5.alert, h6.alert, .collapsible h5.alert, .collapsible h6.alert { padding-bottom: toRem(10); &:first-child { margin-top: toRem(10); } } h6.alert, .collapsible h6.alert { padding-bottom: 0px; } h5 + .alert { margin-top: toRem(20); } h6 + .alert { margin-top: 22px; } h5 + ul.alert { padding-top: 0 !important; } h6 + ul.alert { padding-top: toRem(7) !important; } // ASK KARL IF THIS IS NEEDED .alert > { button, .button, a.button, a.content_button, .content_button > a, .content_button_with_arrow { @include content-button-styles; } } // add more spacing between main title and top alert box .page_nav + .alert { margin-top: toRem(29); } }