Unconstrained
"Set Image Location" is "no constrain".
Image keeps aspect ratio.
Card Simple Examples
Set Image Location at Tablet + Desktop Options
Top + Bottom: Unconstrained • Taller • Shorter
Constrained
"Set Image Location" is "Taller".
Image is cropped.
Constrained
"Set Image Location" is "Shorter".
Image is cropped.
Unconstrained
Set Image Location is "no constrain".
Image will keep aspect ratio.
Constrained
"Set Image Location" is "Taller".
Image is cropped.
Constrained
Set Image Location is "Shorter".
Image will be cropped.
Left + Right: Unconstrained • 25% • 33% • 50%
Card Simple
Left 25%
Card Simple
Left 33%
Card Simple
Left 50%
Card Simple
Left Unconstrained
Card Simple
Right 33%
Card Simple Right
Right 50%Card Simple Buttons
Title text only
Subtitle text only
Body text only in this field
Full Width Cards with Images are Set to the Left
Constrained vs Not Constrained
Constrained
"Set Image Location" is "25%".
Image is cropped and will always fill height of card.
Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text.
Constrained
Set Image Location is Left "33%".
Image is cropped and will always fill height of card.
Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text.
Unconstrained
"Set Image Location" is "none selected".
Image will keep aspect ratio and not always fill height of card.
Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text.
Unconstrained
"Set Image Location" is "none selected".
Image keeps aspect ratio and not always fill height of card.
Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text. Displaying lots of text.
Card Simple cards placed in the Card Simple Carousel
These card only have a top image
Card Simple with Image + Top Border
Card Simple in Dropdown
Card Simple to be placed within Dropdown Menu. Radio Button "Is Being Placed in Dropdown Menu" below is checked "yes".
Goes in: EDU + Portal main content area + Advanced Grid Wrapper
Margin-bottom: 6rem (with margin-bottom options)
Spans width: 100% of container it is in
Note: if the card is too thin where the image isn’t really visible, the width may not work well (due to the text and the image fighting to fill the space that card is allotted) and the card should be stacked at that point
Has options for:
- Image placement - top or bottom (with control over height) and left or right (with control over width). Note: when placed outside AGW, only place image on left or right as card will span 100% of container and will be too wide.
- Background color
- Top bar and top bar color
- Button styling
- TinyMCE allows for body text to have links.
- Font Sizing options
Title Large 22|28|33
Subtitle 20|20|20Body Text for large font sizing is 18px. Card has Cedar Key LT background.
