Skeleton elements serve as placeholders for content that is loading.

The idea is to avoid layout shift when dynamic content is received (like you might get with a loading spinner).

Text placeholder

Simulate a line of text with .bf-skeleton-text

Will follow current text line-height. Set a width to simulate headers or multiple lines of text.

Rectangle

For more control, you can use .bf-skeleton-rect which is a rectangle with default 24px height and 100% width.

Rounded square

Combine with .bf-radius classes and custom width and height to get desired result.

Circle

Card