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 a fallback user icon for Profiles without an image.
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" style="background-image: url('https://wpvip.icpsr.umich.edu/icpsr/wp-content/uploads/sites/11/2025/03/ML-HeadShot2025sq.jpg?')">
</div>
<div class="profile-text">
<div class="profile-name">Sandra Marquart-Pyatt</div>
<div class="profile-title">ICPSR Governance Council</div>
</div>
</div>
</div>
<div class="profile-biography">
<!-- assuming this is coming from wp; otherwise, you don't have to manually create this .wp-content container -->
<div class="wp-content clearfix">
<p>
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.
</p>
</div>
</div> Variables
--profile-image-margin: #{$spacer-sm}; // 0.5rem