Infima Component Demo & Dev Proving Grounds
This page is used for testing, working on components and just generally illustrating what comes with Infima along with theme components built on top of it. It'll be merged into the theme documentation before long.
Test Of comp.feedback():
Feedback submitted, thank you! We'll try not to ask you about this page again.
Was reading this article a good use of your time?
Test Of comp.feedbackAdmin():
Test Of comp.alert():
This is an alert type: primary alert. You can pass this message as markdown and it will render.
This is an alert type: secondary alert. You can pass this message as markdown and it will render.
This is an alert type: info alert. You can pass this message as markdown and it will render.
This is an alert type: success alert. You can pass this message as markdown and it will render.
This is an alert type: warning alert. You can pass this message as markdown and it will render.
This is an alert type: danger alert. You can pass this message as markdown and it will render.
Test Of comp.hero():
Test Of comp.latestBlog():
Latest From The Blog:
Remember The Human: The Technical Reader Version
By Tim Post on 2025-04-16 | Tagged: opinion documentation
AI isn't bad, just like hobby dentistry isn't bad; it's fine if you know what you're doing. Well, perhaps that was a bad example for use in comparison, perhaps even deliberately so, but it got your attention, didn't it?
Most AI platforms won't use off-the-wall comparisons, tongue-in-cheek allusion and comedic metaphors because humor is, at worst dangerous if misunderstood and, at best, a waste of copy space if the reader doesn't appreciate it. And, sadly, more and more, I'm seeing a total absence of it embraced as the best possible quality for technical writing. Yuck!
Product managers are very analytical people who, by nature, make data-driven decisions; it's their default existence and why they're so very good at their jobs. But, this visceral avoidance of simple human conventions like mild playfulness may be killing trust and making your product slower to be picked up, and is a destructive over-correction for confusion that mostly only occurs in maladaptive product daydreams.
Now, that may be what you need; you know your audience, right? I mean, do you? Have you surveyed how happy people are with technical material? I'm just wondering out-loud so you do, too.
I love using AI to bulldoze through rote writing: this includes code as well as text; Gemini is one of the best coding and writing companions I've ever had. But, I use it to help assemble all of the ingredients into what I'm doing, not to make something more than the sum of it all.
And if you're leaving personality out of front-line support and documentation, and out of your video presentations, you're costing yourself conversions, I don't care what your steel-faced PM or designer says.
Badges, Buttons, Button Groups & Pills:
primary secondary info success warning danger- Alpha
- Beta
- Gamma
- Zeta
- Alpha
- Beta
- Gamma
- Zeta
Breadcrumbs & Pagination:
Tabs:
- Alpha
- Beta
- Gamma
- Zeta
- Alpha
- Beta
- Gamma
- Zeta
Avatars:
Various Cards (Laid Out Using Infima's Grid System):
These also use the inline text and spacing helpers, which are described right after this section. Note that this also takes advantage of the multiple sizes of generated images.
Lume Hack-A-Thon 2026
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida.Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida.
Lume Hack-A-Thon 2026
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida.Text & Element Spacing:
Spacing is declarative with Infima using the nomenclature format property--size
and property-side--size. Property is one of margin
or padding, and side is one of top, left, bottom,
right as well as vert and horiz.
When creating content with MDX, it's often necessary to just "slap a margin" or padding on elements to bring everything together. MDX is used by marketers just as much as developers, so we try to keep it easy to keep in one's head.
Almost every <h2> element on this page has the class margin-top--lg applied to it, for instance. Other common shorthand
uses are margin-vert--none, which sets the left and right side
margins to 0. It's a great feature of the framework for when you don't
want to set up a whole separate class just to tweak spacing.
Other Text Helpers
Colors, weights, etc are easily described in class attributes. To change color, for instance, you can addclass="text--color", where `color` is one
of the theme common colors (primary, secondary, success, info, warning, danger).
Produce colors like (backgrounds to show contrast):
This is the primary color.
This is the secondary color.
This is the info color.
This is the success color.
This is the warning color.
This is the danger color.
This is the primary color.
This is the secondary color.
This is the info color.
This is the success color.
This is the warning color.
This is the danger color.
Font effects, transformations, weights and more all have shortcuts; see the Infima Docs for more information. Just remember to watch out for dark mode.