Profile
Definition
The Profile component is a modular, reusable UI card for displaying summarized information about a person in an application and lists. It is not intended to show all available information on a person (for which a profile page would be more suitable). There are two variations:
- Profile with description—an image with a name, other optional information, and description.
- Profile without description—an image with a name and subtitle (typically job position).
Description
Profiles should be used to create a list of people, typically on a team or board.
Profile with description max width is 6 columns. Profiles with no description can be four to a row on xl screens (see example for bootstrap responsive utility classes).
Profiles max-width is 40rem. There is a container query on the
inline-size to switch from side-by-side to stacked design for profiles with
description, based on 30rem.
There is an automatic fallback user icon (SVG set as background-image) for
Profiles without an <img> tag inside .profile-image.
Profile Images are always masked inside a circle, and the image is centered within the circle. It is best to crop the image to a square in order for the desired focus to show.
Examples
Profile with Description
J. Trent Alexander is the Associate Director of ICPSR and the Jerome M. Clubb Collegiate Research Professor in the Institute for Social Research at the University of Michigan. Alexander is a historical demographer and builds social science data infrastructure. He is currently leading the Decennial Census Digitization and Linkage Project (joint with Katie Genadek) and ResearchDataGov (joint with Lynette Hoelter). These projects are supported by awards from the National Science Foundation, the National Institute on Aging, the U.S. Census Bureau, the Bill and Melinda Gates Foundation, the Ballmer Group, and the University of Michigan’s Office of the Vice President for Research. Prior to coming to ICPSR in 2017, Alexander initiated the Census Longitudinal Infrastructure Project at the Census Bureau and managed the Integrated Public Use Microdata Series (IPUMS) at the University of Minnesota.
Joe Saul is ICPSR’s Privacy and Security Officer; he leads data protection at ICPSR, including managing contracts for access to restricted data, FISMA security standards compliance, contingency planning, and incident response. He comes to ICPSR with nearly 30 years of public and private-sector data protection experience, including working on HIPAA implementation at Michigan Medicine and serving as CSO of a health data analytics company. Joe chairs ICPSR’s Disclosure Review Board and Restricted Data Dissemination and Access Committee, as well as leading ICPSR’s Privacy and Security Team.
Joe has a J.D. from the University of Michigan Law School, as well as a B.S. in Cellular and Molecular Biology from the University of Michigan and professional certifications in information security and privacy.
Margaret Levenstein is Director of ICPSR, the Inter-university Consortium for Political and Social Research. Founded in 1962, ICPSR is the largest curated social science data archive in the world and a recipient of a 2019 National Medal for Museum and Library Service.
Margaret Levenstein is Professor in the School of Information, Research Professor in the Institute for Social Research, and Adjunct Professor of Business Economics, University of Michigan. She is Principal Investigator of the NSF infrastructure project, Research Data Ecosystem and Co-Director of the Michigan Federal Statistical Research Data Center. She serves on boards of Social Science Research Council; World Data System; Data Documentation Initiative (DDI); National Internet Observatory; NOAA's Data Archiving and Access Requirements Working Group (DAARWG); Criminal Justice Administrative Records System; and Wealth and Mobility Study. She received her PhD from Yale University and BA from Barnard College, Columbia University. She is a fellow of the National Association for the Advancement of Science. She is author of Accounting for Growth: Information Systems and the Creation of the Large Corporation. Formerly president of the Business History Conference, she is the author of numerous historical and contemporary studies of competition and of innovation as well as the production, dissemination, and confidentiality protection of data for social and economic measurement.
<div class="profile">
<div class="profile-info">
<div class="profile-image">
<img
class="img-fluid"
src="https://wpvip.icpsr.umich.edu/icpsr/wp-content/uploads/sites/11/2025/03/ML-HeadShot2025sq.jpg"
alt="" />
</div>
<div class="profile-text">
<div class="profile-name">Maggie C. Levenstein</div>
<div class="profile-title">Director</div>
<div class="profile-department">Administration</div>
<div class="profile-email">
<a href="mailto:maggiel@umich.edu">maggiel@umich.edu</a>
</div>
<div class="profile-phone">734-555-1234</div>
<div class="profile-cv"><a href="#">CV (PDF)</a></div>
<div class="profile-profiles">
<div class="wp-content clearfix">
<p><a href="#">OrcID</a></p>
<p><a href="#">Google Scholar</a></p>
<p><a href="#">ResearchGate</a></p>
</div>
</div>
<div class="profile-bio-url"><a href="#">External bio</a></div>
</div>
</div>
<div class="profile-biography">
<div class="wp-content">
<p>
Margaret Levenstein is Director of ICPSR, the Inter-university
Consortium for Political and Social Research. Founded in 1962, ICPSR is
the largest curated social science data archive in the world and a
recipient of a 2019 National Medal for Museum and Library Service.
</p>
<p>
Margaret Levenstein is Professor in the School of Information, Research
Professor in the Institute for Social Research, and Adjunct Professor of
Business Economics, University of Michigan. She is Principal
Investigator of the NSF infrastructure project, Research Data Ecosystem
and Co-Director of the Michigan Federal Statistical Research Data
Center. She serves on boards of Social Science Research Council; World
Data System; Data Documentation Initiative (DDI); National Internet
Observatory; NOAA's Data Archiving and Access Requirements Working Group
(DAARWG); Criminal Justice Administrative Records System; and Wealth and
Mobility Study. She received her PhD from Yale University and BA from
Barnard College, Columbia University. She is a fellow of the National
Association for the Advancement of Science. She is author of Accounting
for Growth: Information Systems and the Creation of the Large
Corporation. Formerly president of the Business History Conference, she
is the author of numerous historical and contemporary studies of
competition and of innovation as well as the production, dissemination,
and confidentiality protection of data for social and economic
measurement.
</p>
</div>
</div>
</div>Profile Basic
<div class="profile">
<div class="profile-info">
<div class="profile-image">
<img
src="https://wpvip.icpsr.umich.edu/icpsr/wp-content/uploads/sites/11/2025/06/sandra_marquart_pyatt.jpg"
alt=""
/>
</div>
<div class="profile-text">
<div class="profile-name">Sandra Marquart-Pyatt</div>
<div class="profile-title">ICPSR Governance Council</div>
</div>
</div>
</div>Variables
--profile-image-margin: #{$spacer-sm}; // 0.5rem
--profile-width // fallback of 40rem