Featured Content

Featured Content components add real power to your platform page creation. These widgets let you display courses, microlearning, and products in neat blocks. Configure them to show static content or dynamically exhibit content based on search queries or tags.

✨ View Component in Storybook

Installation

npm install @thoughtindustries/featured-content

Props

FeaturedContent

Name	Required	Type	Description
sidebar	No	ReactNode	Optional sidebar
sidebarPosition	No	SidebarPosition	Left or Right
children	No	ReactNode	The actual content tiles

Layout Examples

Standard Layout

import { FeaturedContent, ContentTileStandardLayout } from '@thoughtindustries/featured-content';

<FeaturedContent>
  <ContentTileStandardLayout
    headerOptions={{ title: 'Feature Content Header' }}
    onAddedToQueue={(item) => Promise.resolve()}
    desktopColumnCount={2}>
    <ContentTileStandardLayout.Item {...itemOne} />
    <ContentTileStandardLayout.Item {...itemTwo} />
  </ContentTileStandardLayout>
</FeaturedContent>

Descriptive Layout

import { FeaturedContent, ContentTileDescriptiveLayout } from '@thoughtindustries/featured-content';

<FeaturedContent>
  <ContentTileDescriptiveLayout
    headerOptions={headerOptions}
    desktopColumnCount={3}
    onAddedToQueue={(item) => Promise.resolve()}>
    <ContentTileDescriptiveLayout.Item {...itemOne} />
  </ContentTileDescriptiveLayout>
</FeaturedContent>

Carousel

import { FeaturedContent, ContentCarousel } from '@thoughtindustries/featured-content';

<FeaturedContent>
  <ContentCarousel headerOptions={headerOptions}>
    <ContentCarousel.Item {...itemOne} />
    <ContentCarousel.Item {...itemTwo} />
  </ContentCarousel>
</FeaturedContent>