DESIGN GARDEN
Cards
The card is useful to add multiple short information. you can add a variety of designs by mixing and matching with different colors of the background and button styles
Colored cards with images
The cards below are mixed between cool gray color and white color backgrounds with the title being displayed on the image itself.
Having a background on the card can help the color pop but also distinguish them from one another.
Add variety by using a mix of colors and different numbers of cards in a row!
Sample Card Design: UA Aildi Site
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Settings Used for The Sample Above
| SETTING | SELECTION |
|---|---|
| Cards per row on Desktop | 3 |
| Card Style | Bordered Cards |
| Card Title Style | Title on image |
| clickable cards | Toggled Off (no links) |
| Card Background | Cool Gray + White |
| Card Link Style | Text link (no links) |
Settings Used for The UA Aildi Site
| SETTING | SELECTION |
|---|---|
| Cards per row on Desktop | 2 |
| Card Style | Bordered Cards |
| Card Title Style | Title within card (default) |
| clickable cards | Toggled Off (no links) |
| Card Background | Cool Gray + White |
| Card Link Style | Text link (no links) |
Button linked cards with images
The cards below are on white background. The title is on the card itself. The difference here is the links at the bottom of the card.
When a card has a link there is an option to make them as buttons which can add color and organization to the cards.
If the background on the card is too much, adding colors to the buttons can help the color pop but also distinguish them from one another.
Add variety by using a mix of colors!
Sample Card Design: UA Aildi Site
Card #1 Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Card #2 Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Card #3 Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Settings Used for The Sample Above
| SETTING | SELECTION |
|---|---|
| Cards per row on Desktop | 3 |
| Card Style | Bordered Cards |
| Card Title Style | Title within card (default) |
| clickable cards | Toggled ON |
| Card Background | White |
| Card Link Style | Red button + Blue button |
Settings Used for The UA Aildi Site
| SETTING | SELECTION |
|---|---|
| Cards per row on Desktop | 3 |
| Card Style | Bordered Cards |
| Card Title Style | Title within card (default) |
| clickable cards | Toggled ON |
| Card Background | White |
| Card Link Style | Blue button + Blue outline button |
Colored Cards and Colored Buttons
The cards below are mixed between cool gray color and warm color backgrounds matched with Blue button and Red button style.
Having a background and using a similar tone of button color can make the card color pop but also distinguish them from one another.
Add variety by using a mix of colors and different numbers of cards in a row!
Sample Card Design: UA Faculty Affairs Site
Card #1 Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Card #2 Title
Lorem ipsum sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Settings Used for The Sample Above
| SETTING | SELECTION |
|---|---|
| Cards per row on Desktop | 2 |
| Card Style | Bordered Cards |
| Card Title Style | Title within card (default) |
| clickable cards | Toggled ON |
| Card Background | Cool Gray + Warm Gray |
| Card Link Style | Blue Button + Red Button |
Settings Used for The UA Aildi Site
| SETTING | SELECTION |
|---|---|
| Cards per row on Desktop | 2 |
| Card Style | Bordered Cards |
| Card Title Style | Title within card (default) |
| clickable cards | Toggled ON |
| Card Background | Warm Gray + White |
| Card Link Style | Red Outline Button + Blue Outline Button |