ArticleCard

This topic describes the anatomy, API reference, and variations of the ArticleCard primitive component.

Anatomy

RequestResponse
import { ArticleCard } from '@sitecore-search/ui';

const MyArticleCardComponent = () => (
  <ArticleCard.Root>
    <ArticleCard.Id />
    <ArticleCard.Title />
    <ArticleCard.Subtitle />
    <ArticleCard.Image />
    <ArticleCard.Content />
  </ArticleCard.Root>
);

Using the component

The following tabs describe use of the ArticleCard primitive component.

Plain component

RequestResponse
() => {
  return (
    <ArticleCard.Root article={Article}>
      <ArticleCard.Title>Card Name</ArticleCard.Title>
    </ArticleCard.Root>
  );
}

Anatomy

RequestResponse
import { ArticleCard } from '@sitecore-search/ui';

const MyArticleCardComponent = () => (
  <ArticleCard.Root>
    <ArticleCard.Id />
    <ArticleCard.Title />
    <ArticleCard.Subtitle />
    <ArticleCard.Image />
    <ArticleCard.Content />
  </ArticleCard.Root>
);

Setting component properties

The following sections describe the various ways you can set values in the component.

Setting the title

In Article.Root

RequestResponse
() => {
  return (
    <ArticleCard.Root article={Article}>
      <ArticleCard.Title />
    </ArticleCard.Root>
  );
}

Setting the subtitle

Screenshot

Screenshot showing the title and subtitle of an article card.

Setting images

Screenshot

Screenshot showing the title and image of an article card.

Setting Article.Content

RequestResponse
() => {
  return (
    <ArticleCard.Root article={Article}>
      <ArticleCard.Title>Card Name</ArticleCard.Title>
      <ArticleCard.Image src="http://www.chicos.com/Product_Images/GIFTCERTCH_000.jpg" width={150} />
      <ArticleCard.Content>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.
      </ArticleCard.Content>
    </ArticleCard.Root>
  );
}

Setting ID in Article.Id

RequestResponse
() => {
  return (
    <ArticleCard.Root article={Article}>
      <ArticleCard.Id />
      <ArticleCard.Title>Card Name</ArticleCard.Title>
      <ArticleCard.Image src="http://www.chicos.com/Product_Images/GIFTCERTCH_000.jpg" width={150} />
    </ArticleCard.Root>
  );
}

API reference

ArticleCard.Root

The ArticleCard.Root component contains all the components of the article card.

Children: ArticleCard.Title, ArticleCard.Subtitle, ArticleCard.Id, ArticleCard.Image, and ArticleCard.Content

Name

Description

article

The article object

ArticleCard.Title

The ArticleCard.Title component is the wrapper for the article's title. If children is not provided, the component uses the value of title from the article present on the Root component.

Parent: ArticleCard.Root

Name

Description

asTitle

The type of the title used (can be h2, h3 or div)

ArticleCard.Subtitle

The Article.Subtitle component is the wrapper for the article's subtitle. If children is not provided, the component uses the value of subtitle from the article present on the Root component.

Parent: ArticleCard.Root

ArticleCard.Id

The ArticleCard.Id component is the wrapper for article's ID. If no children is provided, the component uses the value of the ID from the article property present on the Root component.

Parent: ArticleCard.Root

ArticleCard.Image

The AccordionFacets.Root component contains all the parts of an accordion.

Parent: ArticleCard.Root

ArticleCard.Content

The ArticleCard.Content component is the wrapper for content.

Parent: ArticleCard.Root

Do you have some feedback for us?

If you have suggestions for improving this article,