title: "FeaturedItem" slug: "/packages/featured-item" category: "layout" componentNames:

• "FeaturedItem"
• "FeaturedApp"
• "FeaturedStory"
• "FeaturedTopic"

Featured Item

The featured item can be a story, app, topic, or any other noteworthy content that you want to highlight on a page. There are separate components available for each of the above content types.

To see the different featured items in action, check out the featured item pattern.

To get started with featured items, import the relevant components from @ds-kit/featured-item

import {
  FeaturedItem,
  FeaturedApp,
  FeaturedStory,
  FeaturedTopic,
} from "@ds-kit/featured-item"

Simple Example

The simple example of a custom featured item can look like this:

<FeaturedItem
  kicker="Featured"
  title="Featured Item"
  description="Some description for this featured item"
  imgBg="primary"
/>