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).

student riding bike on campus in-line

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.


Also known as the Medical Scientist Training Program (MSTP). Equip yourself for a career of scientific investigation combined with the practice of medicine.


Provides an individualized research experience in an excellent environment, where students are encouraged to explore a wide range of research possibilities.


Master’s of Science in Clinical Investigation (MSCI)

This unique program combines didactic coursework with mentored research and career development opportunities and provides students with the knowledge and tools to excel in the areas of clinical investigation most relevant to their careers.


Master’s of Population Health Sciences

This five-year combined degree program focuses on clinical epidemiology, quantitative analysis, biostatistics, research methods and research ethics.


Master’s of Public Health

Explore the foundational areas of public health including policy, behavior, environment, epidemiology, biostatistics, planning, evaluation and research.

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.


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.


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

Toggle toolbar

In addition to the default tools and text styles shown in the visual editor toolbar – i.e. italics, bullets – there are more tools and text styles waiting to be revealed!

To reveal these hidden tools and styles – like callouts and disclaimers – click the button on the toolbar with the same icon as the one above. 

Paste as text

If you copy and paste text from another website, an email, Microsoft Word or any other source besides your WordPress site, click “Paste as text” in the visual editor toolbar before you paste.

This mode will prevent the source’s code from invading your page and causing mysterious formatting issues.

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.

Explore our framework for change »

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.

Interactive map of global impact »

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.

Read inspiring I&E stories at the Fuse »

Energy, Environment & Sustainability

Washington University is reducing its environmental impact while developing new research aimed at forging a more sustainable future.

    Sample 5: Cards with images


    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.

    Source: Centers for Disease Control (CDC)


    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


    Related tutorials

    Tailor Element: Box

    Use this Tailor element to organize content into neat little boxes.

    Tailor Element: Card

    Use cards to organize related bits of information side-by-side.