Styling

Font size

All elements inside the component use em units, meaning that they scale depending on the font-size of the parent container. You can use className or style on ThreadsCard to increase the size of all layout items.

Live Editor

<ThreadsCard {...xFactorPost} style={{ fontSize: '22px' }} />

Result

Loading...

Themes

The theme prop can be set to light or dark. Try it out!

Live Editor

<ThreadsCard {...xFactorPost} theme="dark" />

Result

Loading...

Colors

The colors of the pre-defined themes can be extended.

Color setting	Used
primary	Author name, post text
secondary	Engagement
accent	Verified badge, mentions, links, hashtags
muted	Time
background	Background color of the container
border	Border color of the container

Live Editor

<ThreadsCard
  className="with-background-image"
  {...xFactorPost}
  colors={{
    primary: '#ffffff',
    secondary: '#a9e0fe',
    accent: '#1C26FF',
    muted: '#FDFEEC',
    background: '#3AAFB9',
    border: '#ffff00',
  }}
/>

Result

Loading...

Gradient background

Passing in the gradientBackground prop to the component will create a gradient background to the container based on the background color of the active theme.

Live Editor

<ThreadsCard
  className="with-background-image"
  {...xFactorPost}
  theme="light"
  gradientBackground
/>

Result

Loading...

Blurred background

Passing in the blurredBackground prop to the component will create a blurred effect on the background of the container.

Live Editor

<ThreadsCard
  className="with-background-image"
  {...xFactorPost}
  theme="light"
  blurredBackground
/>

Result

Loading...

Accessing the DOM node

Any prop that's a valid HTML5 attribute can be passed in to the component, and its main div will get those attributes, including className and style. This way the component can easily be used with libraries like styled components.

Live Editor

<ThreadsCard
  className="with-background-image"
  {...xFactorPost}
  style={{
    transform: 'rotate(5deg)',
  }}
/>

Result

Loading...

Classnames

The component intentionally exposes classnames on its elements for you to control from your own stylesheet. All classnames start with the react-threads-card prefix.

Exposed classnames

• react-threads-card__container
• react-threads-card__author-username
• react-threads-card__author-image
• react-threads-card__verified-badge
• react-threads-card__time
• react-threads-card__source
• react-threads-card__text
• react-threads-card__imageContainer
• react-threads-card__image
• react-threads-card__threads-logo
• react-threads-card__engagement-container
• react-threads-card__replies
• react-threads-card__reposts
• react-threads-card__likes

/* example */
.react-threads-card__username {
  display: none;
}