Quillo.qweComponents

Tags

#list

84 components tagged list. Narrow them down with a search or more tags.

Layout 3

ClusterThings in a row that goes on to the next line when it runs out of room, with gap and alignment.layoutlistno-js6 views · 8 downloadsMasterDetailA list on the left and the item picked in detail on the right; one at a time with a Back button when narrow.layoutlistnavigationmobilekeyboardinteractive6 views · 6 downloadsReelA strip that scrolls sideways and snaps to each item, with a slim scrollbar or none, and the keyboard.layoutlistmobileno-js4 views · 5 downloads

Typography 3

BulletListAn unordered list with dot, tick, arrow, star, dash or any glyph bullets, in a tone and a spacing.typographylisttextno-js6 views · 7 downloadsCheckListItems shown done or not with ticks and crosses (or empty circles), read-only, with an optional count.typographyliststatusno-js5 views · 8 downloadsOrderedListA numbered list with styled counters: numbers, circles, letters or roman numerals, from any start.typographylisttextno-js5 views · 6 downloads

Actions 1

LoadMoreButtonThe button at the end of a list that says how many are left, spins while loading, and says when there are none.buttonlistloadingno-js5 views · 8 downloads

Forms 4

ChecklistInputCheckboxes under a progress line that says how many are done and fills as they are ticked; each posts with a form.formsinputprogresslistinteractive5 views · 7 downloadsFormSummaryA read-only review of the values entered, in sections each with an Edit link, for the last step before sending.formsrecordlistno-js5 views · 7 downloadsSortableListA list put in order by dragging or with the keyboard, each move announced, the order sent with a form.formslistdragsortkeyboardinteractive5 views · 5 downloadsTransferListTwo filterable lists to move options between, several at a time, by mouse or keyboard.formsselectlistinteractive5 views · 5 downloads

Navigation 7

AccordionSections that open under their titles, on the browser's own <details>: exclusive with a group.navigationlistno-js5 views · 7 downloadsAlphabetIndexA to Z links into a list sorted by name; letters with nothing under them stay in place, disabled.navigationlinklistno-js4 views · 6 downloadsDirectoryNavA long list of names grouped under sticky letter headers, with a row of letters at the top that jumps to each group.navigationlistlinkuserno-js5 views · 5 downloadsLinkListA plain list of links, each with a line saying where it leads, an icon and a short note at the right.navigationlinklistno-js5 views · 6 downloadsMenuA vertical list of links and actions in titled sections, with icons, shortcuts, counts, disabled items and the active one marked.navigationmenulistlinkno-js6 views · 7 downloadsSitemapListA site's pages as a nested list of links, as deep as the site goes, flowing into columns on wide screens.navigationlinklistpageno-js4 views · 5 downloadsTreeViewNested items that open and close, with the arrow keys, type-ahead and optional tri-state checkboxes.navigationlistinteractive6 views · 7 downloads

Data 23

ActivityFeedA stream of what people did, with their pictures, an icon for each kind of action, when, quotes and day headings.datalistsocialtimeno-js5 views · 7 downloadsAvatarStackOverlapping avatars with names in tooltips, links to each person, and a +N that names the rest.userimagelistno-js5 views · 10 downloadsChangelogReleases with version, date and label, their changes grouped by kind: Added, Changed, Fixed, Security and the rest.datalistdocumentno-js6 views · 7 downloadsChatThreadA conversation: grouped messages with avatars, days, a typing indicator, and a box where Enter sends.chatsociallistno-js4 views · 5 downloadsDataListRecords as rows with a title, a line of facts, a status badge and actions as links or buttons.datalistrecord6 views · 9 downloadsDescriptionListTerms and their details, stacked or in two columns that stack on phones, on a real <dl>.datarecordlistno-js5 views · 7 downloadsFileListFiles as a table or a grid, with kind icons, sizes and dates, sorted, picked, downloaded or deleted.filelistdatano-js7 views · 6 downloadsFlowStepsA process as boxes joined by arrows, with words on the arrows, tones and done, current or coming steps; horizontal, or vertical where narrow.chartprogresslistno-js6 views · 8 downloadsKanbanBoardColumns of cards moved by dragging, by keyboard (Space, the arrows, Space) or with each card's arrows.datadraglistinteractive9 views · 6 downloadsLeaderboardPeople ranked by score with medals for the top three, shared places for ties, and your own row kept in view.datalistsocialuserno-js7 views · 7 downloadsListGroupA bordered list of items with descriptions, badges and notes, as links, buttons or text, one active and some disabled.datalistnavigationno-js7 views · 6 downloadsMilestoneListMilestones down a line with dates, done, current, coming or late, a progress bar on those under way, and the whole project's progress.listprogressscheduleno-js6 views · 7 downloadsNewsListHeadlines in a compact list with source, time and a small picture; numbered for a most-read list.listlinkmarketingno-js8 views · 7 downloadsNotificationListNotifications grouped by day (Today, Yesterday, then dates), read or unread, with links, mark-read and dismiss buttons and Mark all as read.notificationliststatusno-js7 views · 6 downloadsOrgChartA tree of people as boxes joined by lines, drawn with CSS on nested lists, with pictures, titles, notes and the reader's place marked.chartuserlistno-js7 views · 6 downloadsProgressListItems each with a label, a bar and its value or percentage, marked in red when one goes over its limit.dataprogresslistdashboardno-js6 views · 5 downloadsRankingListA ranked list with how each item moved since last time: up, down, the same or new, said in words to screen readers.datalistno-js7 views · 6 downloadsReviewListReviews sorted by a select (newest, highest, most helpful), filtered by stars with counts, shown a page at a time.listsortfiltercommercesocialinteractive6 views · 7 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 · 7 downloadsSearchListA list that filters as you type, marks what matched, counts the results and is walked with the arrow keys.listsearchfilterinteractive7 views · 6 downloadsTagCloudTags sized and shaded by how much each is used, as links or text, in name or weight order, on a linear or log scale.datalinklistno-js6 views · 4 downloadsTimelineWhat happened, in order, down a line of coloured dots, as an <ol> with <time> elements.datalisttimeno-js6 views · 7 downloadsVirtualListA list of thousands of items that stays fast by drawing only those in view, with keyboard picking.datalistinteractive6 views · 8 downloads

Media 2

PlaylistNumbered tracks with the one playing marked, each one's length and the total; with sources it plays them in turn.mediaaudiolistinteractive6 views · 5 downloadsThumbnailA small image in five sizes and three shapes, with a line of text over it, a "+N" veil, or a link.mediaimagelistno-js7 views · 9 downloads

Commerce 2

OrderHistoryPast orders with number, date, status and total, each opening on <details> to show its items and links.commercelistrecordstatusno-js6 views · 5 downloadsProductGridProducts as ProductCards in a grid that fits as many across as there is room for, from a list of records.commercegridcardlistprice6 views · 5 downloads

Finance 5

BillListUpcoming bills soonest first, overdue and due-soon ones marked, autopay on or off, with the total to pay and a Pay button each.financebankinglistpaymentsno-js7 views · 5 downloadsCollateralListWhat secures a loan: each item's valuation and documents, and the loan-to-value ratio as a meter against the lender's limit.financeloanslistdatano-js7 views · 5 downloadsPayeeListSaved payees with bank, masked account and what was last paid when, a Pay button each, and a search.financebankinglistsearchinteractive7 views · 4 downloadsRateAlertsSet an alert on an exchange rate, a pair above or below a rate, and see the alerts set, how far each is, and remove them.financeforexformslistinteractive8 views · 6 downloadsTransactionListTransactions grouped by day with category, money in and out, the running balance, pending ones marked, and a search that filters as you type.financebankinglistdatasearchinteractive7 views · 6 downloads

News 1

KeyPointsThe story in a few lines at the top of an article: points with links, marks or numbers, when they were updated, and the rest folded under Show more.newslistsummaryarticleno-js8 views · 10 downloads

Travel 3

EntryRequirementsVisa and entry rules for a passport: visa-free, travel authorisation, eVisa or visa required, the stay allowed, passport validity, documents and health rules.traveldocumentsstatuslistno-js9 views · 8 downloadsPackingListWhat to pack, in groups: a checkbox for each thing with how many, a bar of how much is packed, things to add or take off, packed ones hidden and all unpacked again.travellistchecklistformsinteractive7 views · 7 downloadsTripItineraryA trip day by day: flights, trains, stays, activities and meals in order of time, with booking references, status, today's day marked and the trip counted up.traveltimelineschedulelistno-js9 views · 10 downloads

Blogging 4

BlogrollThe blogs a writer recommends, in groups: name, a line about each, its latest post and how long ago, its feed, and the list as OPML.blogginglistlinksfeedsno-js9 views · 8 downloadsPostArchiveA blog's posts by year and month, newest first: each year a disclosure with its count, its months and their posts, or only the months as links.bloggingnavigationlistarchiveno-js10 views · 8 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 downloadsSeriesNavWhere a post stands in a series: Part 2 of 5, a bar of the parts, the list of them all with this one marked, and the parts before and after.bloggingnavigationserieslistno-js9 views · 7 downloads

Marketing 4

BlogListPosts as cards in a grid or rows down the page: picture, tags, title, excerpt, author and date.marketinglistcardpageno-js8 views · 7 downloadsFaqQuestions that open to their answers on <details>, with a search box that keeps only the ones matching.marketingsearchfilterlistinteractive6 views · 7 downloadsFeatureListFeatures in alternating rows of words and a picture (or code), with ticked points and a link each.marketingsectionlistimageno-js7 views · 6 downloadsHowItWorksNumbered steps with icons, titles and text, in a row joined by a line, or down a column.marketingsectionlistprogressno-js6 views · 8 downloads

Dashboard 5

OnboardingChecklistSteps to finish setting up, with a progress bar, a tick on each done and a link to where the rest get done.dashboardprogresslistformsuserinteractive7 views · 5 downloadsQuotaBarSeveral quotas in one list, each a bar with its numbers, amber near its limit and red at it.dashboardprogressstatuslistno-js7 views · 6 downloadsServerStatusServices with up, degraded, down or maintenance, their uptime and the last days as bars, summed up in one line.dashboardstatusadminlistno-js6 views · 6 downloadsSessionListSigned-in devices with browser, system, place and time, this one marked, and Sign out for each or all the others.dashboardsecuritysettingslistuserinteractive6 views · 5 downloadsSettingsSectionA titled block of settings rows, each a label and hint with its control at the right (SettingsRow).dashboardsettingsformslayoutlistno-js5 views · 6 downloads

Social 3

CommentThreadNested comments with Like and Reply, a reply box that opens under the comment answered, and branches that fold.socialcommentlistinteractive5 views · 6 downloadsHashtagA #tag that links to its page, with an optional count, and HashtagList, the trending tags ranked with their post counts.sociallinklistno-js6 views · 8 downloadsStoryRingA row of avatars in rings, bright for stories not yet seen and grey once seen, with your own first to add one.socialusermedialistno-js6 views · 6 downloads

Scheduling 1

AgendaListEvents grouped by day with the date at the left, each with its time, title and place; today and tomorrow named.schedulecalendarlisttimeno-js6 views · 6 downloads

Mobile 12

AlphaRailListA long list with sticky letter headers and an A to Z rail scrubbed by finger, with a bubble showing the letter and a haptic per step.mobileinteractivetabletlistgesturehaptic1 view · 6 downloadsContactListPeople grouped by letter with avatars from initials, fast search across names and numbers, a call and message action per row.mobileinteractivetabletlistsearchpeople3 views · 8 downloadsDragReorderPut a list in order by long press and drag, scrolling at its edges, and by keys or buttons too.mobileinteractivegesturereorderlisttablet2 views · 7 downloadsExpandingRowA row that opens in place with content pushed down smoothly, keeps only one open if asked, and scrolls itself into view.mobileinteractivetabletlistaccordiondisclosure4 views · 7 downloadsGroupedListiOS-style inset grouped rows with headers, footers and disclosure chevrons, full-row tap targets, and dark mode.mobileno-jstabletlistsettingsios2 views · 7 downloadsHoverCursorRowRows with the iPad pointer's lift on a trackpad or mouse, none on touch, and right-click menus.mobiletabletinteractivepointerlistcontext-menu3 views · 5 downloadsInfiniteFeedA long feed that loads pages as you near the end: loading, retry on failure, end of list, keeps its place on return, and stays light by windowing.mobileinteractivetabletfeedlistvirtual3 views · 5 downloadsNearbyListPlaces by real distance from a position, in km or miles, with walking time, sorted live as the position moves, and open now from their hours.mobileinteractivetabletlocationmaplist2 views · 6 downloadsPullToRefreshPull a list down from its top to refresh, with resistance, a spinner, and success and failure states.mobileinteractivegesturerefreshscrolllist3 views · 8 downloadsSelectionModeLong press starts selecting, tap adds, a toolbar shows the count and actions, and back leaves the mode.mobileinteractivetabletlistgestureselection4 views · 7 downloadsStickySectionFeedSections whose header sticks and is replaced by the next as you scroll, with a date-style floating label, and jump to today.mobileinteractivetabletfeeddatelist3 views · 5 downloadsSwipeRowA list row with actions behind it each way, a full swipe to run one, and a More button and keys to the same actions.mobileinteractivegestureswipelisttablet2 views · 8 downloads

Utilities 1

InfiniteScrollCalls on_more() when the end of its list scrolls into view, with Loading more… and That's all states and a Load more button.utilitylistloadingdatainteractive6 views · 10 downloads

Other tags

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