Team Member Card Reference
Reference for Team Member Card Reference in Web Framework References. Key properties: ID, Class, Avatar Source, Avatar Alt.
Use this reference to understand what Team Member Card Reference is for and which component-specific inspector group matters most when you configure it.
Inspector Property Groups
Team Member Card
| Property | Type | Details |
|---|---|---|
| ID | text | Attribute: id |
| Class | text | Attribute: class |
| Avatar Source | image | Attribute: src |
| Avatar Alt | text | Attribute: alt |
| Name | text | |
| Role | text |
Appearance
| Property | Type | Details |
|---|---|---|
| Back Color | color_group | Options: text-bg-primary, bg-primary, bg-primary-subtle, text-bg-secondary, bg-secondary, bg-secondary-subtle |
| Back Opacity | range | Controls background opacity. Controls background opacity when using background color utilities. Applies classes like bg-opacity-25 , bg-opacity-50 , etc. Bootstrap docs: Background utilities |
| Width | range | Sets a Bootstrap width utility class. Sets a Bootstrap width utility class. Applies utilities like w-25 , w-50 , w-75 , w-100 , or w-auto . Bootstrap docs: Sizing |
| Height | range | Sets a Bootstrap height utility class. Sets a Bootstrap height utility class. Applies utilities like h-25 , h-50 , h-75 , h-100 , or h-auto . Bootstrap docs: Sizing |
| Opacity | range | Sets the opacity utility class. Sets an opacity utility class. Applies utilities such as opacity-25 , opacity-50 , opacity-75 , or opacity-100 . Bootstrap docs: Opacity |
| Shadow | droplist | Applies a Bootstrap shadow utility. Applies a Bootstrap shadow utility. Uses classes like shadow , shadow-sm , shadow-lg , or removes shadow with shadow-none . Bootstrap docs: Shadows Options: Default, None, Small, Regular, Large |
Border
| Property | Type | Details |
|---|---|---|
| Border | enum | Options: All, None, Top, End, Bottom, Start |
| Width | range | Controls border width. Controls border width using Bootstrap border utilities. This applies classes like border , border-2 , border-3 , etc. Bootstrap docs: Border width |
| Rounded | droplist | Options: Default, All, None, Top, End, Bottom |
| Radius | droplist | Options: Default, Small, Medium, Large, X-Large, XX-Large |
| Border Color | colorlist | Options: Default, Primary, Primary Subtle, Secondary, Secondary Subtle, Success |
Spacing
| Property | Type | Details |
|---|---|---|
| Margin<br>&<br>Padding | spacing | |
| X Gutter | range | Horizontal gutter size. Sets the horizontal gutter (spacing between columns). Uses gx-* utilities to control the horizontal gutter size. Bootstrap docs: Gutters |
| Y Gutter | range | Vertical gutter size. Sets the vertical gutter (spacing between rows). Uses gy-* utilities to control the vertical gutter size. Bootstrap docs: Gutters |
Flex Item
| Property | Type | Details |
|---|---|---|
| Align Self | button_group | Options: , , , , |
| Order | range | |
| Grow | button_group | Options: flex-grow-1, flex-grow-0 |
| Shrink | button_group | Options: flex-shrink-1, flex-shrink-0 |
Dynamic Attributes
Avatar Source
| Attribute property | Type | Details |
|---|---|---|
| Value | text | Choose dynamic data binding. |
Avatar Alt
| Attribute property | Type | Details |
|---|---|---|
| Value | text | Choose dynamic data binding. |
Name
| Attribute property | Type | Details |
|---|---|---|
| Value | text | Choose dynamic data binding. |
Role
| Attribute property | Type | Details |
|---|---|---|
| Value | text | Choose dynamic data binding. |
Bio
| Attribute property | Type | Details |
|---|---|---|
| Value | text | Choose dynamic data binding. |