Skip to Main Content
Mosaic Logo
Mosaic Logo
  • Home
  • Browse components
  • Use in projects
    • Colors
    • Icons
    • Grid
    • Links
    • Typography
    • Spacing Utilities
    • SVG
    • Accordions
    • Alerts
    • Badges
    • Buttons
    • Copy to clipboard
    • Cards
    • Featured Container
    • Filter Bar
    • Lists
    • Loading Spinners
    • Modals
    • Pagination
    • Progress Bars
    • Progress Indicator
    • Site Banner
    • Tables
    • Tabs
    • Toast
    • Toggle Switches
    • Well
    • Wizard
    • Events
    • File Browser
    • File Upload
    • Footer
    • Header
    • Hero
    • Post Item
    • Profile
    • Sidebar Navigation
    • Splash
    • Stack
    • Form Instructions
    • Form Layout
    • Form Validation
    • Form Output
    • Checkboxes
    • Labels
    • Radio Buttons
    • Search Input
    • Select
    • Text Inputs

Profile

Definition

A profile is a combination of an image and text. There are two variations. See examples below for both of them

  • Profile with description—an image with a title (typically person's name) and description.
  • Profile without description—an image with a title and subtitle (typically person's name and job position).

Description

Profiles should be used to create a list of people, typically a on team or board.

Examples

Profile with Description

Placeholder image
Joseph Kahne
Joseph Kahne, Ph.D. is the Ted and Jo Dutton Presidential Chair for Education Policy and Politics at the University of California, Riverside and Chair of the MacArthur Foundation Research Network on Youth and Participatory Politics. Joe's current research draws on a national longitudinal survey of youth (conducted in partnership with Cathy Cohen at the University of Chicago) to examine ways participation with digital media is shaping youth civic and political engagement. He also studies ways that educational efforts can improve the quantity, quality, and equality of youth civic and political engagement. A former high school social studies teacher, Joe is Co-Principal Investigator (with Erica Hodgin) of Educating for Democracy in the Digital Age—A district-wide effort in Oakland California to provide all youth with rich and equitable opportunities to work for change in their communities. He sits on the steering committee of the National Campaign for the Civic Mission of Schools, on the iCivics Research Advisory Board, on the advisory board of CIRCLE (the Center for Information and Research on Civic Learning), and he is a Senior Advisor to the Spencer Foundation's New Civics Initiative.

<div class="profile row">
  <div class="profile-image col-6 col-sm-3">
    <img
      class="img-fluid"
      src="https://placehold.co/400x400"
      alt="Placeholder image" />
  </div>
  <div class="profile-text col-sm-9">
    <div class="h3 name">Joseph Kahne</div>
    <!-- <div class="h4 title">Project Manager</div> -->
    <div class="description">
      Joseph Kahne, Ph.D. is the Ted and Jo Dutton Presidential Chair for
      Education Policy and Politics at the University of California, Riverside
      and Chair of the MacArthur Foundation Research Network on Youth and
      Participatory Politics. Joe's current research draws on a national
      longitudinal survey of youth (conducted in partnership with Cathy Cohen at
      the University of Chicago) to examine ways participation with digital
      media is shaping youth civic and political engagement. He also studies
      ways that educational efforts can improve the quantity, quality, and
      equality of youth civic and political engagement. A former high school
      social studies teacher, Joe is Co-Principal Investigator (with Erica
      Hodgin) of Educating for Democracy in the Digital Age—A district-wide
      effort in Oakland California to provide all youth with rich and equitable
      opportunities to work for change in their communities. He sits on the
      steering committee of the National Campaign for the Civic Mission of
      Schools, on the iCivics Research Advisory Board, on the advisory board of
      CIRCLE (the Center for Information and Research on Civic Learning), and he
      is a Senior Advisor to the Spencer Foundation's New Civics Initiative.
    </div>
  </div>
</div>

Profile Basic

Placeholder image
Joseph Kahne
Project Manager
Placeholder image
Joseph Kahne
Project Manager

<div class="profile row">
  <div class="profile-image col-6 col-sm-3 col-md-6">
    <img
      class="img-fluid"
      src="https://placehold.co/400x400"
      alt="Placeholder image" />
  </div>
  <div class="profile-text col">
    <div class="h3 name">Joseph Kahne</div>
    <div class="h4 title">Project Manager</div>
  </div>
</div>

Accessibility Concerns:

  • Make sure to add alt text to the image.

Variables

No CSS Custom or Bootstrap variables

References

  • Jake Archibold, Writing great alt text: Emotion matters
  • facebook

  • Instagram

  • Twitter

  • LinkedIn

  • YouTube

  • Accessibility
  • Privacy Policy
  • Contact Us
Sign up for our newsletter
ICPSR

© 2025 The Regents of the University of Michigan. ICPSR is part of the Institute for Social Research at the University of Michigan.