All The Things
The "All The Things" (ATT) block is multifunctional and is used in many ways.
ATT Block Usages
- Cards with a several variations that can range from just being an image or text, both, and more.
- Card layout options can be single item, contain several items that can be randomized or in a grid
- Cards as just images or just text look stylistically different than just an image placed in body content or a text block in that there is a slight shadow and some depth.
- Cards can be links or hold links in the text or even contain link blocks such as buttons
- Slideshows - cards set up in a way that is interactive with scrolling horizontally through each one.
- Slideshows can be stacked or side by side
- Headers for pages (like the picture of the leatherman at the top of this page)
- Header images can have content overlays such as text/buttons
- Headers can also contain UR approved background videos
- Headers can also function as a slideshow though we do not utilize that since it is not in line with best practices
- Jumbotrons - an option that allows a row background to be an image instead of a color
- Jumbotrons can also content/blocks overlay the image
This page will show you common examples, but other options/configurations may be available.
ATT Block Fields
Layout:
Single
Grid
Slideshow
Cards
Card Guidelines & Tips
- Suggested image size for cards is 530x298
- Suggested image size for slideshows is 770 x 433
- Don't forget to wrap text in <p> tags in the WYSIWYG section
- Cards can wrapped with a link, contain links in the card, or contain a link block
- When using overlay caption on an image, use a gradient overlay
- Try to only utilize header field and ___ characters for text
- Not designed for lots of overlay content (special cases may circumvent this)
- Try to only utilize header field and ___ characters for text
- Headers for caption content also be created in the WYSIWYG space
- This would allow centering the header text.
- This allows for a gold header instead of the default white if the caption background is dark blue
- Don't forget about the grid option for growing content such as issues, programs...etc
- Example: The Quarterly - instead of 18+ card blocks, it is one block.
- Slideshows should not be used to just show an assortment of images, but should be used for a sequential or narrative purpose.
- Such as the "What Your Journey Could Look Like" section on Bachelor degree pages
- When using a slideshow, push for uniform images for a consistent look
- Inconsistent imaging may happen in special cases.
Naming Convention
All cards: card-
Optional modifiers for additional specificity (can be helpful with large/growing sites)
- card-txt- (text only)
- card-txt-rnd- (text only randomized)
- card-img- (img only)
- card-img-rnd (img only randomized)
- card-grid- (grid option)
- card-ss- (slideshowoption)
- card-ss-stack (slideshow stacked)
- card-ss-side (slideshow side-by-side)
Card Examples
- Layout: Single Item
- Design: Only Content
Join the Film Club!
Stop by the library every friday afternoon to watch a film classic and discuss afterwards with free refreshments.
- Layout: Single Item
- Design: Only Content
- Layout: Single Item
- Design: caption overlay
- Item options: Zoom image on hover
- Link source added to card
- Layout: Single Item
- Design: Only Content
- 3 separate items that will change randomly every day
Item 1 Header
Item 1 Content
- Layout: Single Item
- Design: caption below
- Link source added to card
- Options: Gold border on hover
- Layout: Single Item
- Design: caption below
- Caption background color: dark blue
- Link source added to card
- Options: Gold border on hover
- Gold Header is header in WYSIWGY with "<h4 class="text-gold">
- Using default header would give you white text
Join the Film Club
Sign up via 51勛圖厙 Connect and get the invite watch a film classic and discuss afterwards with free refreshments.
Card Grid
card-grid-quarterly
- Layout: grid
- Design: caption below
- Link source: PDFs
- Options: Gold border on hover
- Item options: Zoom on hover
Card Slideshow Examples
card-ss-stack-quarterly
- Layout: slideshow
- Design: caption below
- Link source: PDFs
- slideshow: stacked
card-ss-side-quarterly
- Layout: slideshow
- Design: caption below
- Link source: PDFs
- slideshow: side-by-side
- Side-By-Side Option: Center item not zoomed
card-ss-intl-studies-journey
- Layout: slideshow
- Design: caption below
- slideshow: side-by-side
- Side-By-Side Option: Center item zoomed in
Your First Year
Having already selected one of the six concentrations available within the major at Registration, during your first year you will focus mostly on coursework in the core curriculum including POLS 1101 -- American Government and POLS 2401 -- Global Issues which are prerequisites for all upper division courses.
You will meet with your professional academic advisor to help plot the next three years of your journey. In addition, take the time to visit 51勛圖厙’s Center for Global Engagement to discuss ideas and options for your international experience (whether you are considering a study abroad program or an international internship).
Sophomore Year
During your second year you will be getting close to finishing your requirements in the core curriculum and will start taking upper-level courses in your major and in your chosen field of concentration.
As you transition from meeting with your professional academic advisor to your faculty academic advisor, it is a very good idea to become acquainted with the faculty who teach in the Department of Political Science & International Affairs and find out what their research interests are and what their previous employment experiences are.
It is also a good idea to “join” one or several of the different social media platforms of the department to keep informed about your major. Be sure to meet with the Center for Global Engagement to finalize plans for your required international experience. Consider joining our Model UN program on select campuses to help increase your research, presentation and inter-personal skills.
Junior Year
During your third year you will finish the remaining requirements in the core curriculum (seven common curriculum classes) along with continuing to take courses in your concentration (remember no grade lower than a “C” in a POLS course counts toward graduation).
While not required to do so, generally, you will complete your study abroad by the end of this year. You will also meet with the IA Internship advisor to begin the planning process for your required internship, which normally is completed during the summer following Junior year.
Senior Year
During your final year you will complete your internship if you haven’t already done so, and finish the remaining coursework in your major, particularly the Capstone course, which will bring together your entire program.
Now is the time to work with Career Services starting in the Fall semester to help prepare a CV and do a practice job interview, as well as, help you develop the skills necessary to successfully enter the workplace after graduation.
Make sure to contact your professors along the way and ask them to write letters of recommendation for you or to receive their support as employment references.
Headers
Header Usages
- Headers are mostly going to be used as just a header image or header images in a randomized set.
- Headers can have a UR approved background video.
- These videos have speciific guidelines that is maintained by an internal UR process
- Requests for these videos should be pointed to a
- These videos have speciific guidelines that is maintained by an internal UR process
Special Cases
- Headers can behave similary to the homepage header but we do not advocate for using headers in other ways
- Sliders/carousels in the header space is not best practice
- Headers can have content overlay with text/blocks
- Be careful when using this option as the responsive nature of the content stays over the image in mobile
- You may need to use the workaround noted below in the headers as slideshows section.
- Be careful when using this option as the responsive nature of the content stays over the image in mobile
- Headers can be slideshows
- Slide show options treat content overlays different so it is possible to have one header image with overlay content that stacks separately in mobile.
- Uses a custom CSS txt-block to hide slide indicators
- Example - Nighthwawks Together
- Slide show options treat content overlays different so it is possible to have one header image with overlay content that stacks separately in mobile.
Header Naming Conventions
Header Examples
hd-ss-