Image Card
University Communications has provided further information about this component with regards to best practices on their Web Creator Guide. Check out their guide for more tips and tricks for this component and more.
- Published - Select or unselect to make component visible or not to site visitors. Defaults to published
- (grid only) Columns (required) - Select the number of columns (2-4) to use before wrapping items
- Background Color or Color Options (required) - Choose the colors which to use when displaying the component
- Circle - White, Black, Gray
- Grid
- White Background - Gray Cards
- White Background - Black Cards
- Black Background - White Cards
- Black Background - Gray Cards
- Gray Background - White Cards
- Gray Background - Black Cards
- Section Header (optional)
- Include in Jump Links Menu - Select or unselect to make section title an anchor link
- Section Title - Give the section a title that will help identify the component. This also doubles as an anchor link for the section when using the Current Page Section Menu on Basic Pages
- Description - Short description that helps further explain the section
- Button Color - Color of the CTA button (green, gold)
- Button Link URL / Text - Identify where the button should take visitors and what the button should say
- Image (required) - Pick an image to display
- Title (required) - Provide a short title to describe the icon. Typically 1-2 words
- Description (optional) - Provide a little longer description of the statistic
- Card Link URL / Text (optional) - Provides a simple link to more information about the statistic
Instructions start on the Create or Edit Page within a piece of content.
- Create Content using the Add Component button
- Choose Image Card - Circle or Image Card - Grid from the list of Components in the Cards section
OR
Edit Content using the Edit button - Switch the Published field on or off for the component to be published or unpublished
- (grid only) Select the number of Columns (2-4) to display before wrapping items
- (required) Choose the Background Color or Color Options for the component
- Circle - White, Black, Gray
- Grid
- White Background - Gray Cards
- White Background - Black Cards
- Black Background - White Cards
- Black Background - Gray Cards
- Gray Background - White Cards
- Gray Background - Black Cards
- (Optional) Section Header allows for the creation of a Call to Action (CTA) to display above or to the left of the accordions.
- Include in Jump Links Menu (defaults to yes)
- Section Title
- Description
- Button Color (green, gold)
- Button Link URL / Text
- (required) Chose an Image to display
- (required) Give the card a Title
- (optional) Provide a little Description for the card. Should be short and to the point
- (optional) Give the Card Link a place to send users to learn more
- Click Add Image Card - Item to add more statistics
- Repeat steps 7-11 until desired number of cards has been reached
- Circle - Minimum of 2 items with a maximum of 4 items
- Grid - Unlimited items may be added and they will wrap based on the number of Columns selected
Circle Images
Image Card - Circle allows displays cards with circle images. This component allows for adding 2-4 cards to display across the page. This is great for highlighting a limited number of items.
Card TitleLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Card TitleLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Card TitleLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Card TitleLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Card TitleLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Card TitleLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Grid Images
Image Card - Grid allows displays cards with square images. This component allows for unlimited cards to be displayed in columns across the page. The grid will repeat based on the number of columns chosen in the options.
Card TitleLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Card TitleLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Card TitleLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.