Component gallery

Each section below shows its components in their states, against qa’s edge-case fixtures. TinkerfundShell frames every page: the demo bar with TinkerfundShellResetDemo, TinkerfundShellHeader with TinkerfundShellWordmark and TinkerfundShellSearchField, and TinkerfundShellFooter with TinkerfundShellThemeSwitch. Narrow the window for the menu dialog; switch the theme to see every specimen in Light and Dark.

1. Campaign status

   TinkerfundCampaignStatus

   Every qa Campaign’s state, funding and countdown at qa’s pinned now.

2. Campaign card

   TinkerfundBrowseCampaignCard

   Every state, a zero-Backer Campaign, a title that wraps, and an On-Deal chip. Used by Home, Discover, Category and Deals.

3. Index table

   TinkerfundBrowseIndexTable

   Home’s Popular now. Pick Empty Shelf for the empty row; scroll sideways on a phone.

4. Discover filters

   TinkerfundBrowseFilters

   Discover’s side column and mobile drawer. Here they filter a local list; on Discover they write the URL query.

5. Deal banner

   TinkerfundBrowseDealBanner

   Active and Scheduled Promotions, qa’s two bundles included; qa’s expired code never shows.

6. Campaign readout

   TinkerfundCampaignReadoutTinkerfundProgressBarTinkerfundCampaignDealBadgeTinkerfundCampaignAction

   Back when Live, Notify me when Upcoming, a lock when Ended; the Stapler and Lamp carry their listed bundle’s Deal badge.

7. Recently backed

   TinkerfundCampaignRecentBackers

   Every Live qa Campaign that names Backers, then the Lamp with the visitor’s own Pledge on top. The “Backed by” line shows in the Readout and Card sections: Live and Ended only, Cards Live only.

8. Recommendations

   TinkerfundBrowseRecommendations

   A Campaign page’s two recommendation rows: the Lamp’s picks from another category, the Stapler with no picks, the Hammock whose picks leave Workshop with nothing more. Then the Cart specimen’s row, and a Stapler-only Cart falling back to its category. A sideways row on a phone.

9. Figures

   TinkerfundCampaignFigureGallery

   A Campaign’s figures, one at a time.

10. Reward cards

    TinkerfundCampaignRewardCard

    Every qa Reward in its Campaign’s state: options, stock, sold out, per-Backer limits, digital, long titles.

11. Add-ons, Stretch goals

    TinkerfundCampaignAddonListTinkerfundCampaignStretchGoals

    Every qa Campaign’s Add-ons and Stretch goals in its state.

12. Bonus support

    TinkerfundCampaignSupportCard

    Live, and Ended with a refusal.

13. Cart

    TinkerfundCartGroupTinkerfundCartMini

    Shipped to Europe: a Reward that doesn’t ship there, sold-out lines, an Ended Campaign, and a no-Reward Pledge.

14. Checkout

    TinkerfundCheckoutHeaderTinkerfundPledgeSummary

    The focused header on its second step; the Cart specimen quoted with a code, then a receipt.

15. Account

    TinkerfundPledgeListTinkerfundPledgeStateTinkerfundPledgeEditorTinkerfundPledgeCancel

    Every Pledge state; qa’s baked Pledges plus a cancelled one; the editor on the Lamp Pledge, with its per-Backer limit, options, a digital Reward and an Add-on the Pledge holds the last of; and the cancel dialog.

16. Updates

    TinkerfundCampaignUpdates

    The newest Update open, and none at all.

17. Comment thread

    TinkerfundCampaignComments

    An Inventor reply one level deep, and no comments.

18. Inventor

    TinkerfundInventorProfile

    Every qa Inventor’s page body: many Campaigns, a name long enough to wrap, and none yet.

19. Breadcrumbs

    TinkerfundShellBreadcrumbs

    TinkerfundCampaignSectionNav and the mobile “Back this Campaign” bar live on each Campaign page, since they follow its scroll.

20. Search field

    TinkerfundShellSearchField

    Suggestions come from this Space only: “lamp” finds a Campaign, “test” an Inventor’s Campaigns, and “mug”, a prod Campaign, nothing. Enter opens the results page.