9.0.80 • Published 22 hours ago

@fluentui/react-card v9.0.80

Weekly downloads
-
License
MIT
Repository
github
Last release
22 hours 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.80

22 hours ago

9.0.79

5 days ago

9.0.78

12 days ago

9.0.77

15 days ago

9.0.76

19 days ago

9.0.75

28 days ago

9.0.74

1 month ago

9.0.73

2 months ago

9.0.72

2 months ago

9.0.71

2 months ago

9.0.70

2 months ago

9.0.69

3 months ago

9.0.68

3 months ago

9.0.67

3 months ago

9.0.66

4 months ago

9.0.65

4 months ago

9.0.64

4 months ago

9.0.63

4 months ago

9.0.62

4 months ago

9.0.61

4 months ago

9.0.60

4 months ago

9.0.59

5 months ago

9.0.58

5 months ago

9.0.57

5 months ago

9.0.19

11 months ago

9.0.28

9 months ago

9.0.27

10 months ago

9.0.29

9 months ago

9.0.24

10 months ago

9.0.23

10 months ago

9.0.26

10 months ago

9.0.25

10 months ago

9.0.20

11 months ago

9.0.22

10 months ago

9.0.21

10 months ago

9.0.39

8 months ago

9.0.38

8 months ago

9.0.35

9 months ago

9.0.34

9 months ago

9.0.37

8 months ago

9.0.36

9 months ago

9.0.31

9 months ago

9.0.30

9 months ago

9.0.33

9 months ago

9.0.32

9 months ago

9.0.49

7 months ago

9.0.46

7 months ago

9.0.45

8 months ago

9.0.48

7 months ago

9.0.47

7 months ago

9.0.42

8 months ago

9.0.44

8 months ago

9.0.43

8 months ago

9.0.40

8 months ago

9.0.56

6 months ago

9.0.53

6 months ago

9.0.52

7 months ago

9.0.55

6 months ago

9.0.54

6 months ago

9.0.51

7 months ago

9.0.50

7 months ago

9.0.18

11 months ago

9.0.17

11 months ago

9.0.16

11 months ago

9.0.15

11 months ago

9.0.13

12 months ago

9.0.12

12 months ago

9.0.14

12 months ago

9.0.11

1 year ago

9.0.10

1 year ago

9.0.9

1 year ago

9.0.8

1 year ago

9.0.7

1 year ago

9.0.6

1 year ago

9.0.5

1 year ago

9.0.4

1 year ago

9.0.3

1 year ago

9.0.2

1 year ago

9.0.1

1 year ago

9.0.0

1 year ago

9.0.0-rc.1

1 year ago

9.0.0-rc.2

1 year ago

9.0.0-beta.47

1 year ago

9.0.0-beta.46

1 year ago

9.0.0-beta.45

1 year ago

9.0.0-beta.39

1 year ago

9.0.0-beta.44

1 year ago

9.0.0-beta.42

1 year ago

9.0.0-beta.43

1 year ago

9.0.0-beta.40

1 year ago

9.0.0-beta.41

1 year ago

9.0.0-beta.37

1 year ago

9.0.0-beta.38

1 year ago

9.0.0-beta.35

1 year ago

9.0.0-beta.36

1 year ago

9.0.0-beta.33

2 years ago

9.0.0-beta.34

1 year ago

9.0.0-beta.31

2 years ago

9.0.0-beta.32

2 years ago

9.0.0-beta.30

2 years ago

9.0.0-beta.29

2 years ago

9.0.0-beta.28

2 years ago

9.0.0-beta.27

2 years ago

9.0.0-beta.26

2 years ago

9.0.0-beta.25

2 years ago

9.0.0-beta.19

2 years ago

9.0.0-beta.24

2 years ago

9.0.0-beta.22

2 years ago

9.0.0-beta.23

2 years ago

9.0.0-beta.20

2 years ago

9.0.0-beta.21

2 years ago

9.0.0-beta.17

2 years ago

9.0.0-beta.18

2 years ago

9.0.0-beta.15

2 years ago

9.0.0-beta.16

2 years ago

9.0.0-beta.13

2 years ago

9.0.0-beta.14

2 years ago

9.0.0-beta.11

2 years ago

9.0.0-beta.12

2 years ago

9.0.0-beta.9

2 years ago

9.0.0-beta.8

2 years ago

9.0.0-beta.6

2 years ago

9.0.0-beta.10

2 years ago

9.0.0-beta.5

2 years ago

9.0.0-beta.4

3 years ago

9.0.0-beta.3

3 years ago

9.0.0-beta.2

3 years ago

9.0.0-beta.1

3 years ago

9.0.0-alpha.17

3 years ago

9.0.0-alpha.18

3 years ago

9.0.0-alpha.16

3 years ago

9.0.0-alpha.15

3 years ago

9.0.0-alpha.13

3 years ago

9.0.0-alpha.11

3 years ago

9.0.0-alpha.12

3 years ago

9.0.0-alpha.10

3 years ago

9.0.0-alpha.9

3 years ago

9.0.0-alpha.8

3 years ago

9.0.0-alpha.7

3 years ago

9.0.0-alpha.6

3 years ago

9.0.0-alpha.5

3 years ago

9.0.0-alpha.4

3 years ago

9.0.0-alpha.3

3 years ago

9.0.0-alpha.2

3 years ago

9.0.0-alpha.1

3 years ago