Article Components

Article Page

An ArticlePage is configured in a CMS. It extends the content page configurations with article-specific fields.

Field	Description
slug	The page URL
title	The page title. Used in SEO and Open Graph
description	The page description. Used in SEO and Open Graph
keywords	Used in SEO.
images	Used with SEO and Open Graph
type	Used with SEO and Open Graph
articleCardMedia	Image or video to use in the article card
articleCardTitle	The title used for the Article Card. Defaults to SEO title if empty.
articleCardDescription	Used for the Article Card description. Defaults to SEO description if empty.
author	The author of the article.
readTime	The estimated time to read the article in minutes. (options are 1-15)
articleDate	The date of the article.
category	The category of the article.
articleBodyHeaderMedia	Media card or Media Hero to display at the top of the page
articleBodyContent	The content displayed in the body of the page

Article Body

An ArticleBody is comprised of ArticleSections. It can also be configured to have a SimpleLinkGroup of Social links. An ArticleTableOfContents is generated as part of the ArticleBody; each section's header text is used to create links to the corresponding section for in-page navigation.

Field	Description
sections	Array of article sections
social	Simple link group

Article Section

An ArticleSection extends the Text component with additional article-specific fields. In addition to the variants below, a section can be configured with a MediaCard or MediaHero content item. This item can optionally have a caption. One optional content item that is not captioned can be added to each section.

An ArticleSection is a subcomponent used in ArticleBody components. Each one can have its own heading and layout configurations. Each section will be used in an auto-generated Table of Contents.

Preview

Section One Header

Section Body 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.

Code

import {
  ArticleSection,
  ArticleSectionBody,
  ArticleSectionHeader,
  ArticleText,
} from '@hv/ui/article';
import { Text } from '@hv/ui/text';

export default function ArticleSectionExample({
  headerText,
  text,
  headerTextPosition,
  headerPadding,
  bodyTextPosition,
  paddingTop,
  paddingBottom,
  fullBleed,
}) {
  return (
    <ArticleSection
      paddingTop={paddingTop}
      paddingBottom={paddingBottom}
      fullBleed={fullBleed}
    >
      <ArticleText>
        <ArticleSectionHeader
          position={headerTextPosition}
          headerPadding={headerPadding}
        >
          <Text text={headerText} type={'text'} format={'markdown'} />
        </ArticleSectionHeader>
        <ArticleSectionBody position={bodyTextPosition}>
          <Text text={text} type={'text'} format={'markdown'} />
        </ArticleSectionBody>
      </ArticleText>
    </ArticleSection>
  );
}

Variants	Description	Values
headerTextPosition	Text alignment of the header	Left Right Center
headerPadding	Amount of padding below the header.	Regular Extra
bodyTextPosition	Text alignment of the body text	Left Right Center
fullBleed	Width of the text is flush left and right or has side padding	True False
background	Optional background color; default is transparent	Color picker value
paddingTop	Option to control spacing above the component	Regular Extra
paddingBottom	Option to control spacing below the component	Regular Extra

Article Card

An ArticleCard data comes from an ArticlePage. In the CMS, when configuring an Article Page, there are three fields specific to how to render the article's card. They are: Article Card Media, Article Card Title, and Article Card Description.

Preview

Article Card Title

Article Card Description

Read More

Code

tip

If using this component in a NextJS app, you will want to replace the <img/> and <a/> elements used in this code example with the NextJS Image and Link components.

import {
  ArticleCard,
  ArticleCardMedia,
  ArticleCardBackground,
  ArticleCardTitle,
  ArticleCardDescription,
  ArticleCardReadMore,
  ArticleCardTextBlock,
} from '@hv/ui/article-card';
import { Button } from '@hv/ui/button';

export default function ArticleCardExample({ title, description, media }) {
  return (
    <a href='#' className='flex hover:no-underline'>
      <ArticleCard>
        <ArticleCardMedia>
          <ArticleCardBackground asChild>
            <img
              src={media.src}
              alt={media.alt}
              className='absolute inset-0 h-full object-cover'
            />
          </ArticleCardBackground>
        </ArticleCardMedia>
        <ArticleCardTextBlock>
          <ArticleCardTitle className='text-black'>{title}</ArticleCardTitle>
          <ArticleCardDescription>{description}</ArticleCardDescription>
          <ArticleCardReadMore>
            <Button asChild variant='link'>
              <a href='#'>Read More</a>
            </Button>
          </ArticleCardReadMore>
        </ArticleCardTextBlock>
      </ArticleCard>
    </a>
  );
}