Cards
component level, card templates
Card base styles
No use details added just yet...
*Dashed border - for space refrence only
*card-base - basic space add, background inherit.
card-ghost - removes background
card-lifted - adds shadow (md)
card-outline - adds border (md)
Card Title
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum expedita similique non voluptatum earum quo magni dicta consequatur deleniti voluptate tempore porro aspernatur eveniet nulla unde, dolor voluptates.
Explore
Goto:School of Education Goto:School of Education Goto:School of Education Goto:School of Education Goto:School of Education
Card Title
sub title
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum expedita similique non voluptatum earum quo magni dicta consequatur deleniti voluptate tempore porro aspernatur eveniet nulla unde, dolor voluptates.
Card Title
sub title
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum expedita similique non voluptatum earum quo magni dicta consequatur deleniti voluptate tempore porro aspernatur eveniet nulla unde, dolor voluptates accusamus quis.
Goto:School of Education
Card Title
sub title
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum expedita similique non voluptatum earum quo magni dicta consequatur deleniti voluptate tempore porro aspernatur eveniet nulla unde, dolor voluptates accusamus quis.
Goto:School of Education
Card Title
sub title
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum expedita similique non voluptatum earum quo magni dicta consequatur deleniti voluptate tempore porro aspernatur eveniet nulla unde, dolor voluptates accusamus quis.
Goto:School of EducationDo not - Mix cards that have un-even content:
Use common cards in a section or row, also consider content length.
- This is an example of mixed cards and content length where the shifting of content becomes a distraction.
- Even-height cards can feel unbalanced when placed next to cards with longer content which can create unwanted white space.
- Consider other card combinations when layouts become inconsistent.
- Always check cards at every page.
Card Title
sub title
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Goto:School of Education
Card Title
sub title
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Goto:School of Education
Card Title
sub title
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum expedita similique non voluptatum earum quo magni dicta consequatur deleniti voluptate tempore porro aspernatur eveniet nulla unde, dolor voluptates accusamus quis.
Goto:School of Education
Card Title
sub title
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Goto:School of EducationCard layout adaptability:
Cards / element width(s) are determined by the parent or container they live within, a column in most cases.
All cards / elments must scale down properly, meaning maintain visul layout and readablity at every pixel not just breakpoints.
Use break points and proper column layouts to achieve proper container structure.
Card Title
Event
Nov 23
4:00pm - 8:00pm
Card Title
Event
Nov 23
4:00pm - 8:00pm
map
Card Title
Event
Nov 23
4:00pm - 8:00pm
map
Card Title
Event
Nov 23
4:00pm - 8:00pm
map
Card Title
Event
Nov 23
4:00pm - 8:00pm
map
Card Title
Event
Nov 23
4:00pm - 8:00pm
map
Card Title
Event
Nov 23
4:00pm - 8:00pm
map
Card Title
Event
Nov 23
4:00pm - 8:00pm
map
Card Title
Event
Nov 23
4:00pm - 8:00pm
map
Card Title
Event
Nov 23
4:00pm - 8:00pm
map
Card Title
Event
Nov 23
4:00pm - 8:00pm
map
card collection - not for use
Less is more.
– Ludwig Mies van der Rohe