Homepage-style News Cards
These cards are triggered only on Call Out Box components. The Call Out Boxes must be built using an Image, Link, and Headline - and only these three fields.
Triggering the Call Out Box
Using the "Styles" tab of the Call Out Box - the cards must be triggered using two class names added to the "Additional Classes" field.
card home
The default implementation will provide the following
- Hover card and background effect utilizng BGSU orange color
- The image will fill the card and center
- Cards have a default fixed height
Card Options
The following are categories of options which can be triggered via additional classes. You can mix-and-match any single choice from each category of options for various styling effects.
Card height
For further layout options, you can make a card roughly half of the fixed height of the standard card by adding the half-height class. So that you can stack two cards on top of each other and they will align with a full sized card. You can trigger this with an additional class
Hover background element colors
All of the BGSU brand colors are available to utilize on the background elements that display on hover. To change them you can enter any one of the following class names. If no color name is provided, BGSU orange is used.
- brown
- teal
- gold
- seafoam
- tan
- coral
- rose
card home coral
card home gold
Hover background element style
There is one additional style you can apply that will affect the colored background hover element. Using the bordered class, will make the colored background element be an unfilled shape, with only a border.
Image positioning
Depending on your layout choice and height selection, some photos may not work well centered in the card. There are a number of classes you can add to the card to adjust the image positioning.
- ir = pins the image to the right
- il = pins the image to the left
- ib = pins the image to the bottom
- itl = pins the image to the top left corner
- itr = pins the image to the top right corner
- ibl = pins the image to the bottom left corner
- ibr = pins the image to the bottom right corner
- i30 = pins the image to 30% from the left
- i60 = pins the image to 60% from the left
- ib30 = pins the image to the bottom and 30% from the left
- ib60 = pins the image to the bottom and 60% from the left
- it30 = pins the image to the top and 30% from the left
- it60 = pins the image to the top and 60% from the left
News Card Categories
The following classes will trigger a "tab" in the bottom left of the card that will display a chosen news category. Each news category is associated with a brand color, which will display. Do not use these in combination with any of the background color options.
Category Classes
- news = University News
- student = Student Success
- research = Research & Innovation
- diversity = Diversity & Belonging
- alumni = Alumni
- impact = Advancing Our Impact
- faculty = Faculty Spotlight
- arts = The Arts
- athletics = Athletics
card home student bordered
card home research i30
Updated: 05/26/2023 07:57AM