Boxes and cards are similar Tailor elements that break up and highlight content. So how do you know which one to use?
The choice to use boxes versus cards depends on the kind of content you are presenting, including the availability and type of images, as well as the visual emphasis you want to create. Since the elements are similar, the decision can be subjective.
Both boxes and cards work best if they are used as multiples (eg, at least two per row).
This is a Box
Box graphic:
- Choose to show an image, icon, or no graphic
- Appears above title
- Has padding all the way around (no bleed)
Box text:
- Title and body text appear below image or icon
- No divider between title and body text
This is a Card
Card graphic:
- Choose to show an image or one of five background colors
- Appears behind title
- If image is selected, it’s cropped and scaled to fit the card and “bleeds” off the edges (no padding)
Card text:
- Title overlays image or background color
- Body text appears below title and graphic
Sample 1: Boxes without images
(This gray element is a billboard, in case you’re wondering.)
Combined medical degree programs
The School of Medicine offers four- and five-year medical degree programs, including combined dual-degree programs.
Sample 2: Boxes with images
Sam Fox School undergraduate programs
The Sam Fox School offers a vast array of programs in art, architecture, and design. In addition to programs for undergraduate and graduate students both on campus in St. Louis and internationally, the School offers summer programs for everyone from high school students to professionals, and is involved in a variety of initiatives with partners across campus and throughout the St. Louis area.
Art
Th BFA in Art is built on two central ideas: first, you will become a maker with technical and conceptual depth; second, you will drive your own education with the choices you make about what classes to take and what projects to take on.
Fashion Design
The BFA in Fashion Design provides experience in designing for mass production, as well as one-of-a-kind pieces.
Communication Design
In the Communication Design program, you can choose to design interfaces for mobile devices and the web, make pictures for games and motion graphics, illustrate stories, create comics, and design printed posters and books.
Architecture
Our Bachelor of Science and BA of Design in Architecture programs emphasize the development of both making and digital skills.
Sample 3: Boxes with icons
Sample 4: Cards with background colors
Despite the example below…
We recommend sticking with only one background color for all of the cards on your site. Vary colors only if the variation has meaning (eg, yellow could indicate alerts and dark gray could show reminders), and use these colors consistently sitewide.
Washington University Strategic Priorities
Advancing Human Health
We are bringing together many scholars, disciplines and diverse partners to address complex health issues facing the St. Louis region and the world.
- Institute for Public Health
- Washington University School of Medicine in St. Louis
- Washington University Physicians
Diversity & Inclusion
Washington University embraces differences.
We aim to create a welcoming and collaborative community of people of great ability from all backgrounds, encouraging our faculty and students to be bold, independent thinkers.
Global Engagement
We strive to infuse global awareness into all aspects of education.
Washington University’s global initiatives offer international collaboration, research and learning opportunities that empower our students, faculty and staff to work toward a better world.
Innovation & Entrepreneurship
A hub of innovation, Washington University inspires entrepreneurial efforts.
We provide the infrastructure, educational programs and research support to tap the entrepreneurial spirit of our faculty and students.
Energy, Environment & Sustainability
Washington University is reducing its environmental impact while developing new research aimed at forging a more sustainable future.
- Office of Sustainability
- Consortium for Clean Coal Utilization (CCCU)
- International Center for Advanced Renewable
Sample 5: Cards with images
MERS
Middle East Respiratory Syndrome (MERS-CoV) is a viral respiratory illness that was first reported in Saudi Arabia in 2012 and has since spread to several other countries, including the United States.
MRSA
Methicillin-Resistant Staphylococcus aureus (MRSA) is largely a hospital-acquired infection that, over the last four decades, has evolved from a controllable nuisance into a serious public health concern.
Source: National Institute of Allergy & Infectious Diseases (NIAID)
E. coli
Escherichia coli (E. coli) bacteria live in the intestines of people and animals, and are key to a healthy intestinal tract. Most E. coli strains are harmless, but some can cause diarrhea through contact with contaminated food or water.
Source: NIAID
Ebola & Marburg
Ebola and Marburg hemorrhagic fevers are acute viral diseases that often lead to severe illness and death in humans and other primates. The infections typically affect multiple organs in the body and are often accompanied by bleeding.
Source: NIAID