Fluent UI PersonaCard Example - Fluent-ui Typing CST Test
Loading…
Fluent UI PersonaCard Example — Fluent-ui Code
Displays a user card with actions using Fluent UI PersonaCard.
import React from 'react';
import { Persona, PersonaSize, Stack, DefaultButton } from '@fluentui/react';
const PersonaCardExample = () => (
<Stack horizontalAlign='center' verticalAlign='center' verticalFill styles={{ root: { minHeight: '100vh' } }}>
<Persona text='Jane Doe' secondaryText='Product Manager' size={PersonaSize.size72} />
<Stack horizontal tokens={{ childrenGap: 10 }} styles={{ root: { marginTop: 20 } }}>
<DefaultButton text='Message' />
<DefaultButton text='Connect' />
</Stack>
</Stack>
);
export default PersonaCardExample;Fluent-ui Language Guide
Fluent UI is a React-based front-end framework developed by Microsoft that provides a set of customizable, accessible, and enterprise-ready UI components for building modern web applications.
Primary Use Cases
- ▸React-based enterprise web applications
- ▸Office 365 and Microsoft Teams integrations
- ▸Admin dashboards with complex forms and data tables
- ▸Accessible and standardized UI across large organizations
- ▸Rapid prototyping with consistent design patterns
Notable Features
- ▸Accessible components with ARIA roles
- ▸Themeable design system with light/dark modes
- ▸Composable React components (Button, ComboBox, DetailsList)
- ▸Integration with Fluent Design System
- ▸Responsive design utilities
Origin & Creator
Created by Microsoft (initially as Office UI Fabric) in 2016 to standardize UI for Office and enterprise apps.
Industrial Note
Fluent UI is widely used in Microsoft ecosystems, Office 365 integrations, and enterprise web applications requiring consistency with Microsoft design guidelines.