Infima

A modern styling framework for content-driven websites 🔥

Infima is not yet ready for production use and is being developed alongside Docusaurus 2

Layout

Grid

https://infima.dev/docs/layout/grid

6

6

4

4

4

3

3

3

3

2

2

2

2

2

2

1

1

1

1

1

1

1

1

1

1

1

1

Spacing

Components

Alert

https://infima.dev/docs/components/alert

This is a primary alert. You should probably pay attention to it.

Avatar

https://infima.dev/docs/components/avatar

Dan Abramov

Working on @reactjs. Co-author of Redux and Create React App.

Badge

https://infima.dev/docs/components/badge

Primary Secondary Success Info Warning Danger

Breadcrumbs

https://infima.dev/docs/components/breadcrumbs

Button

https://infima.dev/docs/components/button

Card

https://infima.dev/docs/components/card

Jared Palmer

Consultant, Speaker, Lead Engineer

Dropdown

https://infima.dev/docs/components/dropdown

• Home
• Profile
• Settings
• Help
• Logout

Footer

https://infima.dev/docs/components/footer

Docs

• Getting Started
• API
• FAQ

Community

• Users
• Contribute
• Stack Overflow

Social

• GitHub
• Facebook
• Twitter

More

• Tutorial
• Blog

Copyright © 2022 Meta Platforms, Inc.

Hero

https://infima.dev/docs/components/hero

Hero Title

Not all heroes wear capes

Menu

https://infima.dev/docs/components/menu

Navbar

https://infima.dev/docs/components/navbar

Pagination Nav

https://infima.dev/docs/components/pagination-nav

Pagination

https://infima.dev/docs/components/pagination

• «
• 1
• 2
• 3
• ...
• »

Pills

https://infima.dev/docs/components/pills

• Alpha
• Beta
• Gamma
• Zeta

Tabs

https://infima.dev/docs/components/tabs

• Alpha
• Beta
• Gamma
• Zeta

Utilities

Colors

https://infima.dev/docs/utilities/colors

Primary

Secondary

Success

Info

Warning

Danger

Shadows

https://infima.dev/docs/utilities/shadows

Tall Elevation

Text

https://infima.dev/docs/utilities/text

Left aligned text

Center aligned text

Right aligned text

Justified text