import { Meta } from '@storybook/addon-docs/blocks';

Card Header Migration

Overview

Before:

tsx

import { CardHeader } from '@fluentui/react-northstar';

const Component = () => <CardHeader>Lorem ipsum</CardHeader>;

After:

tsx

import { CardHeader } from '@fluentui/react-components';

const Component = () => <CardHeader header="Lorem ipsum" />;

CardHeader props	migration guide
as, className	keep it as is
variables, styles	see Migrate `style` overrides in this document
accessibility	see migrate-custom-accessibility.md. Also check the focusMode new prop
fitted	REMOVED: by default, all headers are fitted

⚠️ If this is your first migration, please read the general guide on how to migrate styles.

Follow the same patterns as in the Card migration guide.