Team Member List (Full Demo)

Team Members - List

List: Default

Portrait of Jackson Cross, MCSD

Jackson Cross, MCSD

Assistant Dean for Academic Programs, Professor Internal Medicine
Phone: (409) 555-7777
Mobile: (409) 555-1234
Fax: (409) 555-5678

List: Divider + Image Medium + Additional Info

CSS Classes: item-divider img-medium add-info-show
Portrait of Jackson Cross, MCSD

Jackson Cross, MCSD

Assistant Dean for Academic Programs, Professor Internal Medicine
The University of Texas Medical Branch
General Medicine
Digital Team
Phone: (409) 555-7777
Mobile: (409) 555-1234
Fax: (409) 555-5678
Portrait of Everett Hane, MD

Everett Hane, MD

Division Chief
The University of Texas Medical Branch
Internal Medicine
General Medicine
Phone: (409) 555-5555
Mobile: (409) 555-1234
Portrait of Lila Montgomery, BA

Lila Montgomery, BA

Web Design & Development Specialist
The University of Texas Medical Branch
Strategic Communications & Branding
Digital Team
Phone: (409) 555-5555
Mobile: (555) 123-4567

List: Card + Circle Image + Contacts Inline

CSS Classes: item-card img-circle contacts-inline
Portrait of Jackson Cross, MCSD

Jackson Cross, MCSD

Assistant Dean for Academic Programs, Professor Internal Medicine
Phone: (409) 555-7777
Mobile: (409) 555-1234
Fax: (409) 555-5678

List: Card Medium + Contacts Inline + Circle Image + Image Medium

CSS Classes: item-card-medium item-card contacts-inline img-circle img-medium

List: Card Small + Contacts Inline + Circle Image + Image Small + Contacts Hide

CSS Classes: item-card-small img-circle img-small contacts-hide

List: Card XSmall + Contacts Inline + Image XSmall + Circle Image + Contacts Hide + Position Hide + Vertical Align Center

CSS Classes: item-card-xsmall img-xsmall img-circle contacts-hide position-hide info-valign-center

List: Card + Grid + Center 

CSS Classes: item-card list-col-sm-6 center
NOTE: Using the grid classes automatically sets the image position to top (img-top). You can override this by setting the image position on the widget using CSS classes to image left (img-left) or remove the image altogether by with image hide (img-hide).

Team Members - List Name Only

Team Members - List Name & Position

Link Card - Name Only: Image Hide

CSS Class: img-hide

Link Card - Name Only: Image XSmall + Image Circle

CSS Class: img-xsmall img-circle

Link Card - Name Only: Grid + Center

CSS Classes: list-col-sm-6 center

Link Card - Name Only: Grid + Center + Image Circle

CSS Classes: list-col-sm-6 center img-circle

Link Card - Name And Position: Grid + Center

CSS Classes: list-col-sm-6 center

Link Card - Name Position Contacts: Grid + Center + Image Cirlce

CSS Classes: list-col-sm-6 center img-circle

List: Link Card + Grid + Image Left + Image Medium + Image Circle

CSS Classes: list-col-sm-6 img-left img-medium img-circle