9.0.96 • Published 7 months ago

@fluentui/react-card v9.0.96

Weekly downloads
-
License
MIT
Repository
github
Last release
7 months ago

@fluentui/react-card

React Card components for Fluent UI React

A card is a container that holds information and actions related to a single concept or object, like a document or a contact.

Usage

To import React Card components:

import { Card, CardPreview, CardHeader, CardFooter } from "@fluentui/react-components';

Example Card usage:

example of a Card component in usage

import { Share16Regular, ArrowReply16Regular } from '@fluentui/react-icons';
import { Button, Body1, Caption1 } from '@fluentui/react-components';
import { Card, CardHeader, CardPreview, CardFooter } from '@fluentui/react-components';

const App = () => (
  <>
    <Card>
      <CardHeader
        image={
          <img
            src="https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card/assets/avatar_elvia.svg"
            alt="Face of a person"
          />
        }
        header={
          <Body1>
            <b>Elvia Atkins</b> mentioned you
          </Body1>
        }
        description={<Caption1>5h ago · About us - Overview</Caption1>}
      />
      <CardPreview
        logo={
          <img
            src="https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card/assets/docx.png"
            alt="Microsoft Word logo"
          />
        }
      >
        <img
          src="https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card/assets/doc_template.png"
          alt="Preview of a Word document"
        />
      </CardPreview>
      <CardFooter>
        <Button icon={<ArrowReply16Regular />}>Reply</Button>
        <Button icon={<Share16Regular />}>Share</Button>
      </CardFooter>
    </Card>
  </>
);

Specification

See the Spec.md file for background information on the design/engineering decisions of the component.

API

For information about the components, please refer to the API documentation.

Migration

For migration information, have a look at the migration guide.

9.0.96

8 months ago

9.0.95

8 months ago

9.0.94

9 months ago

9.0.93

9 months ago

9.0.92

9 months ago

9.0.89

10 months ago

9.0.86

11 months ago

9.0.85

12 months ago

9.0.88

11 months ago

9.0.87

11 months ago

9.0.82

1 year ago

9.0.81

1 year ago

9.0.84

12 months ago

9.0.83

1 year ago

9.0.91

10 months ago

9.0.90

10 months ago

9.0.80

1 year ago

9.0.79

1 year ago

9.0.78

1 year ago

9.0.77

1 year ago

9.0.76

1 year ago

9.0.75

1 year ago

9.0.74

1 year ago

9.0.73

1 year ago

9.0.72

1 year ago

9.0.71

1 year ago

9.0.70

1 year ago

9.0.69

1 year ago

9.0.68

1 year ago

9.0.67

1 year ago

9.0.66

1 year ago

9.0.65

1 year ago

9.0.64

1 year ago

9.0.63

1 year ago

9.0.62

1 year ago

9.0.61

1 year ago

9.0.60

1 year ago

9.0.59

1 year ago

9.0.58

1 year ago

9.0.57

1 year ago

9.0.19

2 years ago

9.0.28

2 years ago

9.0.27

2 years ago

9.0.29

2 years ago

9.0.24

2 years ago

9.0.23

2 years ago

9.0.26

2 years ago

9.0.25

2 years ago

9.0.20

2 years ago

9.0.22

2 years ago

9.0.21

2 years ago

9.0.39

2 years ago

9.0.38

2 years ago

9.0.35

2 years ago

9.0.34

2 years ago

9.0.37

2 years ago

9.0.36

2 years ago

9.0.31

2 years ago

9.0.30

2 years ago

9.0.33

2 years ago

9.0.32

2 years ago

9.0.49

2 years ago

9.0.46

2 years ago

9.0.45

2 years ago

9.0.48

2 years ago

9.0.47

2 years ago

9.0.42

2 years ago

9.0.44

2 years ago

9.0.43

2 years ago

9.0.40

2 years ago

9.0.56

2 years ago

9.0.53

2 years ago

9.0.52

2 years ago

9.0.55

2 years ago

9.0.54

2 years ago

9.0.51

2 years ago

9.0.50

2 years ago

9.0.18

2 years ago

9.0.17

2 years ago

9.0.16

2 years ago

9.0.15

2 years ago

9.0.13

2 years ago

9.0.12

2 years ago

9.0.14

2 years ago

9.0.11

2 years ago

9.0.10

2 years ago

9.0.9

2 years ago

9.0.8

2 years ago

9.0.7

2 years ago

9.0.6

2 years ago

9.0.5

2 years ago

9.0.4

2 years ago

9.0.3

2 years ago

9.0.2

2 years ago

9.0.1

2 years ago

9.0.0

2 years ago

9.0.0-rc.1

2 years ago

9.0.0-rc.2

2 years ago

9.0.0-beta.47

2 years ago

9.0.0-beta.46

2 years ago

9.0.0-beta.45

2 years ago

9.0.0-beta.39

2 years ago

9.0.0-beta.44

2 years ago

9.0.0-beta.42

2 years ago

9.0.0-beta.43

2 years ago

9.0.0-beta.40

2 years ago

9.0.0-beta.41

2 years ago

9.0.0-beta.37

2 years ago

9.0.0-beta.38

2 years ago

9.0.0-beta.35

2 years ago

9.0.0-beta.36

2 years ago

9.0.0-beta.33

3 years ago

9.0.0-beta.34

3 years ago

9.0.0-beta.31

3 years ago

9.0.0-beta.32

3 years ago

9.0.0-beta.30

3 years ago

9.0.0-beta.29

3 years ago

9.0.0-beta.28

3 years ago

9.0.0-beta.27

3 years ago

9.0.0-beta.26

3 years ago

9.0.0-beta.25

3 years ago

9.0.0-beta.19

3 years ago

9.0.0-beta.24

3 years ago

9.0.0-beta.22

3 years ago

9.0.0-beta.23

3 years ago

9.0.0-beta.20

3 years ago

9.0.0-beta.21

3 years ago

9.0.0-beta.17

3 years ago

9.0.0-beta.18

3 years ago

9.0.0-beta.15

3 years ago

9.0.0-beta.16

3 years ago

9.0.0-beta.13

3 years ago

9.0.0-beta.14

3 years ago

9.0.0-beta.11

3 years ago

9.0.0-beta.12

3 years ago

9.0.0-beta.9

3 years ago

9.0.0-beta.8

3 years ago

9.0.0-beta.6

3 years ago

9.0.0-beta.10

3 years ago

9.0.0-beta.5

4 years ago

9.0.0-beta.4

4 years ago

9.0.0-beta.3

4 years ago

9.0.0-beta.2

4 years ago

9.0.0-beta.1

4 years ago

9.0.0-alpha.17

4 years ago

9.0.0-alpha.18

4 years ago

9.0.0-alpha.16

4 years ago

9.0.0-alpha.15

4 years ago

9.0.0-alpha.13

4 years ago

9.0.0-alpha.11

4 years ago

9.0.0-alpha.12

4 years ago

9.0.0-alpha.10

4 years ago

9.0.0-alpha.9

4 years ago

9.0.0-alpha.8

4 years ago

9.0.0-alpha.7

4 years ago

9.0.0-alpha.6

4 years ago

9.0.0-alpha.5

4 years ago

9.0.0-alpha.4

4 years ago

9.0.0-alpha.3

4 years ago

9.0.0-alpha.2

4 years ago

9.0.0-alpha.1

4 years ago