Profile Card

A paragraph component highlighting an individual.

Summary

A Profile Card highlights an individual. It displays a photo, name, job title, phone number, and email address, and can be linked to a Profile page for full biography. Note: This is not to be confused with the Profile content type, which is page tailored for providing a biography.

Profile Cards can be added to Landing Pages and Site Pages.

Audience

Editors, Publishers, and Web Managers.

How To

  • 1

    Insert a Profile Card

    Hand cursor selecting Profile Card from the choose a component dialogue box.
    • Select Profile Card from the Choose Component dialogue box. 

    Profile Cards can also be placed on other Content Types. For example, a Profile Card may be placed within a Tab/Accordion of a How-To Content Type. The interface differs, but the steps are similar.

    • Select the caret to expand the menu options.
    • Choose the Add Profile Card paragraph component.  
    Hand cursor expanding the options for components that can be inserted into a Tab Accordion Paragraph.
    Accordion
    Tab/Accordion Items

    Tab/Accordion Paragraph
    Abraham Lincoln

    Abraham Lincoln

    Sixteenth President of the United States of America (202) 762-1401
  • 2

    Photo and Image Style

    Dimensions and Resolution

    The ideal dimensions for a portrait Profile Card Main Image depend on the Image Style you plan to use. See the table below for dimensions. The recommended minimum resolution is double the desktop view size for clearer, better-looking images on high resolution screens. 

    Three Profile Cards are lined up side by side to illustrate how different image style settings impact the appearance of the image on the card.
    Three Profile Cards of President Abraham Lincoln illustrate how the different Image Style settings affect the appearance of the photo on the Profile Card. Each Profile Card uses the same uncropped image with dimensions of 1332px wide by 1644px high. From left to right, the Image Style settings are rectangle, portrait, and square. 
    Image StyleWidth x Height
    Profile Card - Default (Rectangle)1152 x 768
    Profile Card - Portrait752 x 1000
    Profile Card - Square1152 x 1152

    Alternative Text

    All meaningful images must have descriptive alternative text (alt text) to be accessible for visitors with low or no vision. If the image does not convey meaningful information and is purely decorative, check the box for Decorative Image and leave the Alternative Text field empty. This allows screen reading software to skip over the image. Learn more about Alternative Text. 

    Add media button and image style drop down menu on the Create New Profile Card dialogue box.
    • Profile Card Main Image - Select the Add Media button to add a Main Image.
    • The Media Library opens. Select the desired image, or upload a new image and select it.
    • Select Insert Selected.
    • A thumbnail of the image you selected now appears. 
    • Select the desired Image Style drop-down menu:
      • None (Default, Rectangle)
      • Rectangle
      • Portrait
      • Square
  • 3

    Profile Card Fields

     Begin filling out the form. Fields marked with an asterisk (*) are required:

    • Name (*) - Enter a name to be used as the title of this content. For example, first and last names, organization name, or any other name. Example: Abraham Lincoln
    •  Name Heading Level - Select the appropriate heading level for digital accessibility. 
      • h2
      • h3 (Default)
      • h4
      • h5
    • Job Title - Enter the individual's job title. Example: Sixteenth President of the United States of America
    • Phone Number - Enter the individual's phone number. Example: (202) 762-1401 
    • Email Address - Enter the individual's email address. 
    • Link - If you have created a full biography page for the individual with the Profile content type, provide a link to that page here. 
    Data fields on the profile card paragraph component.
  • 4

    Save

    • Save the component. 
    • Save the content type (page).