Primitive UI components

Search JS SDK for React
UI components reference

ArticleCard

Primitive UI components in Search UI Components package, are headless, building blocks used to create the headless widget templates for React applications. You can use them to scaffold your custom widgets.

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

Anatomy

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

In your React application, paste the following code block then modify the primitives to match your needs.

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

Styled component

In your React application, paste the following code block then modify the primitives to match your needs.

Screenshot of a styled ArticleCard primitive component.

() => {
  const StyledArticleRoot = styled(ArticleCard.Root)`
    border: 1px solid ${theme.vars.palette.primary.light};
    box-shadow: 2px 2px 4px ${theme.vars.palette.grey['400']};
    width: 80%;
    padding: ${theme.vars.spacing.m};
    cursor: pointer;
    display: block;
    &:focus-within {
      border: solid 1px ${theme.vars.palette.primary.main};
    }
    &:hover {
      border: solid 1px ${theme.vars.palette.primary.main};
    }
  `;

  const StyledArticleTitle = styled(ArticleCard.Title)`
    margin: 0 0 ${theme.vars.spacing.s};
    font-family: ${theme.vars.typography.fontFamilySystem};
    font-size: ${theme.vars.typography.fontSize2.fontSize};
  `;

  const StyledArticleContent = styled(ArticleCard.Content)`
    margin: 0;
    font-family: ${theme.vars.typography.fontFamilySystem};
    font-size: ${theme.vars.typography.fontSize1.fontSize};
    line-height: 1.43;
    letter-spacing: 0.01071em;
    color: ${theme.vars.palette.primary.main};

    img {
      width: 150px;
      margin: 0 ${theme.vars.spacing.s} 0 ${theme.vars.spacing.s};
      float: left;
    }
  `;

  const StyledArticleSubtitle = styled(ArticleCard.Subtitle)`
    font-family: ${theme.vars.typography.fontFamilySystem};
    color: ${theme.vars.palette.primary.main};
    font-size: ${theme.vars.typography.fontSize2.fontSize};
    margin: 0 0 ${theme.vars.spacing.s};
  `;

  const StyledArticleLink = styled.a`
    text-decoration: none;
    color: ${theme.vars.palette.primary.main};
    font-size: var(--sdc-font-size-l);
    &:hover {
      text-decoration: none;
    }
    &:focus {
      text-decoration: none;
    }
  `;

  return (
    <StyledArticleRoot article={Article}>
      <StyledArticleLink href="#" onClick={(e) => e.preventDefault()}>
        <StyledArticleTitle />
        <StyledArticleSubtitle />
      </StyledArticleLink>
      <StyledArticleContent />
    </StyledArticleRoot>
  );
}

Anatomy

For a complete implementation, put together parts of the UI component as shown in the following code block.

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

{ .notintoc }

In your React application, paste the following code block then modify the primitives to match your needs.

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

{ .notintoc }

In your React application, paste the following code block then modify the primitives to match your needs.

() => {
  return (
    <div>
      <ArticleCard.Root article={Article}>
        <ArticleCard.Title asTitle="h3" />
      </ArticleCard.Root>
    </div>
  );
}

{ .notintoc }

In your React application, paste the following code block then modify the primitives to match your needs.

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

Setting the subtitle

{ .notintoc }

Screenshot showing the title and subtitle of an article card.

{ .notintoc }

In your React application, paste the following code block then modify the primitives to match your needs.

() => {
  return (
    <ArticleCard.Root article={Article}>
      <ArticleCard.Title />
      <ArticleCard.Subtitle>Card subtitle</ArticleCard.Subtitle>
      <ArticleCard.Image width={150} />
    </ArticleCard.Root>
  );
}

{ .notintoc }

In your React application, paste the following code block then modify the primitives to match your needs.

() => {
  return (
    <ArticleCard.Root article={Article}>
      <ArticleCard.Title />
      <ArticleCard.Subtitle />
      <ArticleCard.Image width={150} />
    </ArticleCard.Root>
  );
}

Setting images

{ .notintoc }

Screenshot showing the title and image of an article card.

{ .notintoc }

In your React application, paste the following code block then modify the primitives to match your needs.

() => {
  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.Root>
  );
}

{ .notintoc }

In your React application, paste the following code block then modify the primitives to match your needs.

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

Setting Article.Content

In your React application, paste the following code block then modify the primitives to match your needs.

() => {
  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

() => {
  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

This section describes the component or component parts displayed in the anatomy structure. For every component, you will find:

Components to which you can add it as a child.
Components you can add as its child.
Details of any properties you can set.

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

If you have suggestions for improving this article, let us know!