Quillo.qweComponents

Tags

#card

57 components tagged card. Narrow them down with a search or more tags.

Layout 4

BentoGridA grid of tiles spanning columns and rows, with titles, tints and links, packed to leave no holes.layoutgridcardmarketingno-js9 views · 6 downloadsCardA surface for one thing, with a title, a header and a footer, or a link as a whole.layoutcardno-js8 views · 6 downloadsMasonryCards of different heights packed into columns, each filled from the top, on CSS columns alone.layoutgridcardno-js6 views · 7 downloadsPanelA bordered box in three parts: a header bar with a title and controls, a body, and a footer bar for actions.layoutcardsectionno-js5 views · 7 downloads

Forms 2

CheckboxCardsAny number of choices as cards with a title, a line of detail and a check, each a real checkbox a form sends.formsinputcardselectno-js5 views · 6 downloadsRadioCardsOne choice of several as cards with a title, a line of detail and a dot, each a real radio a form sends.formsinputcardselectno-js5 views · 7 downloads

Overlays 1

QuickViewA Quick view button on a card that opens a preview of the item, its picture, price, text and actions, in a dialog.dialogcardcommerceoverlayinteractive5 views · 5 downloads

Data 15

ArticleCardA post to click into: image, category, title, excerpt, author, date and reading time; image on top or to the side.cardmarketingpagelinkno-js5 views · 7 downloadsBoardingPassA boarding pass with from and to, flight, date and times, gate, seat, boarding group, a barcode area and a stub.documentcardscheduleprintno-js4 views · 5 downloadsContactCardA person's contact details as tel:, mailto: and map links, with a vCard to download in one tap.carduserprofilerecordno-js5 views · 7 downloadsEmailPreviewAn email as a client shows it: subject, labels and star, sender with picture, to and cc, the date, the message and attachments to download.documentcarduserfileno-js6 views · 7 downloadsFeedItemA social-feed item: avatar, name, handle, time, text, a picture or any media, and like, comment and share buttons with counts.socialcardusercommentno-js6 views · 7 downloadsFilePreviewA look at a file before opening it: an image, a PDF in an object, the start of a text file, a player, or an icon, with name, size and a download link.filemediacarddocumentno-js5 views · 7 downloadsIdCardAn ID badge with a lanyard slot: photo or initials, name, role, organisation, number, issued and expiry dates, an Expired stamp, and a barcode slot.documentcarduserprintno-js5 views · 6 downloadsKpiCardA number with its label, the change since last period coloured by whether that is good, and a small trend as a line or bars.datadashboardcardchartno-js7 views · 7 downloadsProfileCardA person at a glance: picture, name, title, bio, a row of stats and action buttons, stacked or in a row.cardprofileusersocialno-js7 views · 4 downloadsRecordCardA record's fields as labelled values in a card, with a title, status, formatted values and actions in a footer.datacardrecordno-js7 views · 4 downloadsReviewCardOne review: stars (halves too), title, text, reviewer and date, a Verified mark, images, the seller's reply and a Helpful vote.cardsocialcommentcommerceno-js7 views · 6 downloadsRoadmapColumns (Now, Next, Later) of items with a status badge, tags, a target date and votes; side by side, stacked where narrow.listcardprogressno-js8 views · 6 downloadsTeamCardA person in a team grid: square photo or initials, name, role, a line, and icon links to email, GitHub, LinkedIn, X or a site.carduserprofilegridno-js6 views · 8 downloadsTestimonialCardA customer's quote with their picture, name, title and company or logo, and stars if they gave some.cardmarketingsocialuserno-js5 views · 6 downloadsTicketAn event ticket with a tear line and stub: event, date, venue, section, row and seat, the holder, a code or a QR as children.documentcardscheduleprintno-js6 views · 7 downloads

Charts 1

SymbolCardA symbol with its name, last price, change and percent, a sparkline over the previous close, the day's range and volume.carddatatradingno-js6 views · 6 downloads

Media 1

MediaCardA card with a picture (or any media) on top or at the side, then a meta line, title, text and actions.cardmediaimagelayoutno-js6 views · 6 downloads

Commerce 7

AddressCardA saved address with a Default badge and Edit and Remove, as submit buttons in a plain form or callbacks.commercecheckoutcardrecorduserno-js6 views · 7 downloadsPaymentMethodsWays to pay as radio cards with their marks: card (with the brands taken), PayPal, Apple Pay, Google Pay, bank, cash.commercecheckoutformsselectcardno-js6 views · 5 downloadsPricingCardOne plan: name, price and period, what it includes, and a button; highlighted with a badge when it is the one to pick.commercepricecardmarketingno-js7 views · 6 downloadsProductCardA product in a shop's grid: picture, name, price with the discount, stars, a badge and Add to cart, as a plain form or a callback.commercecardpriceimagebuttoncart6 views · 6 downloadsProductGridProducts as ProductCards in a grid that fits as many across as there is room for, from a list of records.commercegridcardlistprice6 views · 5 downloadsShippingOptionsShipping methods as radio cards, each with its price and how long it takes; a plain form sends the choice.commercecheckoutformsselectcardno-js7 views · 7 downloadsSubscriptionCardThe plan someone is on: price, status, renewal date, usage bars and the links to manage, change or cancel it.commercepricecardsettingsdashboardno-js6 views · 6 downloads

Finance 9

AccountCardA bank account at a glance: type, nickname, masked number, current and available balance, what is on hold, and quick actions.financebankingcarddashboardno-js8 views · 7 downloadsAccountDetailsThe details to share to get paid: account name and number, IBAN in groups of four (checked), BIC, sort code or routing number, each with a copy button.financebankingcardcopyinteractive6 views · 6 downloadsCardControlsA card's controls beside its masked face: freeze it, set daily spending and cash limits, and allow online, ATM, contactless and abroad use.financebankingformssettingscardinteractive7 views · 6 downloadsCurrencyPairCardOne currency pair: the bid and ask large with the pip digits biggest, the spread, the day's change, low and high, and a sparkline of the day.financeforexcardchartno-js7 views · 6 downloadsCurrencyWalletBalances in several currencies with the total in a base currency, each with its rate, its worth and share, and convert and send actions.financeforexbankingcardno-js9 views · 6 downloadsLoanOffersLoan offers side by side: each lender's APR, term, monthly payment, fees and total cost, with the cheapest in total marked.financeloanscarddatano-js8 views · 7 downloadsLoanSummaryA loan in a card: the outstanding balance out of the amount borrowed, how much is paid off as a bar, the rate, and the next payment and when it is due.financeloanscardbankingno-js8 views · 7 downloadsMemberCardA co-op or credit union member's card: photo or initials, name and number, member since, share capital and status.financecoopcarduserno-js8 views · 6 downloadsSavingsGoalA savings goal: target and saved so far, the progress, the deposit needed each month to reach it by the date, and the last deposits.financecoopbankingcardcalculatorno-js7 views · 6 downloads

News 2

FactCheckA fact-check: the claim and who said it, the rating large and on its scale from true to false, what was found, the sources, with ClaimReview markup.newscardratingarticleno-js8 views · 12 downloadsMatchScoreA game's score: both teams with crests or colours, the score and scorers, and where it stands: kick-off, live with the minute, half time, full time or postponed.newssportscardliveno-js10 views · 8 downloads

Travel 5

CarRentalCardA hire car offer: class and model or similar, seats, bags, gearbox and air conditioning, mileage and fuel policy, supplier rating, pick-up and the price a day and in all.travelcarscardcommerceno-js10 views · 11 downloadsFlightResultA flight in search results: departure and arrival times, the time in the air, stops and layovers, cabin and bags, and the fare with Select.travelflightscardcommerceno-js9 views · 9 downloadsFlightStatusA flight's status today: on time, delayed, boarding, in the air or cancelled, with the new times beside the old, gate changes and the baggage belt.travelflightsstatuscardno-js9 views · 12 downloadsHotelCardA hotel in search results: photo, stars, the review score badge, location, amenities, cancellation terms and the price a night with the stay's total.travelhotelscardcommerceno-js9 views · 10 downloadsTourCardA tour or activity: photo, badge and save heart, duration, stars and reviews, free cancellation and pickup, languages, the next start and the price from per person.travelactivitiescardcommerceno-js8 views · 9 downloads

Blogging 2

AuthorBioThe box at the end of a post about its author: picture or initials, name and role, a short bio, links elsewhere, their post count and a follow link.bloggingusercardprofileno-js8 views · 9 downloadsRelatedPostsRead next: other posts at the end of one, those sharing the most tags first, with picture, title, excerpt, date and the shared tags marked.bloggingcardlistrecommendationsno-js8 views · 7 downloads

Marketing 3

BlogListPosts as cards in a grid or rows down the page: picture, tags, title, excerpt, author and date.marketinglistcardpageno-js8 views · 7 downloadsFeatureGridA grid of a product's features, each an icon, a title and a sentence, from a list or written by hand (Feature).marketingsectiongridcardno-js7 views · 4 downloadsTestimonialsQuotes from people with their picture, role and company, in a row that scrolls or a grid that wraps.marketingsectioncardsocialno-js9 views · 7 downloads

Dashboard 1

WidgetA dashboard panel: a title row with a menu slot, the body, and a footer line or link, as a named region.dashboardcardlayoutsectionno-js7 views · 6 downloads

Social 1

PostCardA post in a feed: author, time, text, picture, like, comment and share counts, and the three buttons.socialcarduserno-js5 views · 5 downloads

Scheduling 2

BookingSummaryWhat was booked: the place and picture, dates in and out with the nights counted, guests, price lines, total and status.schedulecommercepricecheckoutcardno-js6 views · 7 downloadsEventCardAn event as a card: a date block, title, time, place, a line about it, an optional picture and badge, and a button.schedulecalendarcardtimeno-js7 views · 6 downloads

Mobile 1

CardStackCards in a fan: a tap lifts one, a switch freezes it, and its details are hidden, shown and copied a field at a time.mobileinteractivebankingcardclipboardtablet2 views · 8 downloads

Other tags

interactive504no-js370mobile211forms176tablet151data128smart100list84chart80commerce68input64navigation63layout59card57finance52gesture48media44dashboard42text39button38feedback38keyboard37social37marketing36table34typography32search31status31user31document30image28picker28link26page26time26banking25calendar24overlay24select24progress23trading22calculator21schedule21travel20grid19settings19menu18news18security18utility18offline17price17blogging16dialog16sheet16swipe15accessibility14drag14notification14tabs14upload14chat13checkout13filter13popover13file12loans12section12audio11loading11profile11coop10forex10icon10code9article8camera8developer8flights8form8print8record8validation8comment7location7onboarding7pricing7video7cart6json6theme6animation5barcode5field5health5keypad5map5planning5qr5scroll5sort5admin4analytics4clock4dates4editor4feed4header4live4notes4parser4photo4player4seo4share4statistics4subscription4toast4analysis3banner3billing3budget3checklist3compare3date3election3games3gloves3gps3haptics3monitoring3number3panes3payment3pen3rotation3sensor3sync3tasks3timeline3timer3toolbar3tracking3undo3units3update3url3voice3wheel3wizard3writing3alerts2balance2capacity2cards2colour2columns2csv2currency2dedupe2device2discount2draft2drawing2education2email2experiment2feeds2files2forecast2fuzzy2help2history2hotels2links2long-press2meetings2merge2messages2money2motion2network2otp2panel2payments2permission2permissions2photos2pin2pinch2query2questions2quiz2rating2reactions2refresh2reorder2report2responsive2retry2scanner2selection2shipping2sign-in2slider2split2stock2storage2store2stories2summary2svg2tax2ticket2till2timezone2tracker2transfer2version2wallet2zoom2accordion1activities1ads1agenda1aggregate1agile1alert1amount1annotate1anomaly1api1app-shell1approval1archive1assessment1audit1autosave1availability1back1backlog1backtest1badge1bank1bar1battery1bibliography1bill1bills1book1bracket1branching1browser1builder1bulk1bundle1business1buy1byline1campaign1carousel1cars1cash1change1changes1check1chips1citation1cleaning1clipboard1cloud1cohort1combobox1comments1compass1conditional1configurator1confirm1conflicts1contact1context-menu1contrast1conversion1converter1cooking1copy1cost1coupon1cron1curl1dark-mode1deadline1debt1decimal1decision1decode1delivery1dependencies1design1detents1diff1disclosure1documents1downloads1dst1duplicates1edit1emoji1empty1encoding1entropy1envelopes1error1event1expenses1explorer1export1fab1faq1fashion1first-run1fit1fixtures1flashcards1flashlight1flesch1floor-plan1formatter1formula1frame1fullscreen1funnel1gallery1game1generator1geofence1goals1grades1grammar1group1groups1guard1handwriting1haptic1heading1headline1heatmap1hours1http1i18n1iban1import1income1indicator1inference1insights1interest1invoice1ios1isbn1job1jsonpath1jwt1kanban1keywords1kiosk1league1learning1level1like1lint1loan1localization1lock1logs1lyrics1mail1margin1markdown1markup1master-detail1matching1memory1mention1modal1mortgage1music1natural1notch1notice1notifications1options1order1orientation1outlier1overflow1overtime1packing1pagination1passcode1password1paste1pattern1payoff1payroll1paywall1people1plans1podcast1pointer1policy1poll1power1preview1profiling1projects1properties1publishing1quality1queue1rail1ranked1ranking1readability1reader1receipt1recipe1recommendations1records1reference1refinance1regex1register1regression1reliability1reload1reply1resize1resources1restaurant1resume1retention1revision1rewards1rings1risk1roles1roster1rota1rules1salary1save-data1savings1schema1screen1seats1seeds1seek1series1shake1shortcuts1sidebar1signature1signup1sizing1slo1slug1splash1sports1spotlight1spreadsheet1sql1stack1staff1standings1startup1status-bar1stepper1steps1sticky1streaks1study1style1subscribe1subtotals1support1survey1switch1tags1team1teams1temperature1template1time-zones1tip1tldr1toggle1torch1tour1tournament1transit1translation1tree1trend1tutorial1typo1unread1unsaved1username1validate1vibrate1viewer1virtual1visualisation1vote1voting1wake-lock1warehouse1waveform1wcag1weather1weight1weights1widget1world1