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.
<BlueskyCard {...zucchiniPost} style={{ fontSize: '22px' }} />
Themes
The theme
prop can be set to light
, dim
or dark
. Try it out!
<BlueskyCard {...zucchiniPost} theme="dark" />
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 |
<BlueskyCard className="with-background-image" {...zucchiniPost} colors={{ primary: '#ffffff', secondary: '#a9e0fe', accent: '#1C26FF', muted: '#FDFEEC', background: '#3AAFB9', border: '#ffff00', }} />
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.
<BlueskyCard className="with-background-image" {...zucchiniPost} theme="light" gradientBackground />
Blurred background
Passing in the blurredBackground
prop to the component will create a blurred effect on the background of the container.
<BlueskyCard className="with-background-image" {...zucchiniPost} theme="light" blurredBackground />
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.
<BlueskyCard className="with-background-image" {...zucchiniPost} style={{ transform: 'rotate(5deg)', }} />
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;
}