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 BlueskyCard to increase the size of all layout items.

Live Editor

<BlueskyCard {...zucchiniPost} style={{ fontSize: '22px' }} />

Result

Loading...

Themes

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

Live Editor

<BlueskyCard {...zucchiniPost} theme="dark" />

Result

Loading...

Colors

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

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

Live Editor

<BlueskyCard
  className="with-background-image"
  {...zucchiniPost}
  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

<BlueskyCard
  className="with-background-image"
  {...zucchiniPost}
  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

<BlueskyCard
  className="with-background-image"
  {...zucchiniPost}
  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

<BlueskyCard
  className="with-background-image"
  {...zucchiniPost}
  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-bluesky-card prefix.

Exposed classnames

• react-bluesky-card__container
• react-bluesky-card__author-username
• react-bluesky-card__author-image
• react-bluesky-card__time
• react-bluesky-card__source
• react-bluesky-card__text
• react-bluesky-card__imageContainer
• react-bluesky-card__image
• react-bluesky-card__bluesky-logo
• react-bluesky-card__engagement-container
• react-bluesky-card__replies
• react-bluesky-card__reposts
• react-bluesky-card__likes

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