Quillo.qweComponents

Tags

#media

44 components tagged media. Narrow them down with a search or more tags.

Layout 3

AspectRatioKeeps what it holds at a shape (16/9, 4/3, 1): an image or a video fills a box of the right height.layoutimagemediano-js9 views · 7 downloadsBrowserFrameA mock browser window around its content, with the address in its bar, for screenshots and demos.layoutmediaimagemarketingno-js7 views · 6 downloadsCarouselSlides one at a time: buttons, dots, swiping, the keyboard, and optional autoplay that knows when to stop.mediaimageinteractive8 views · 7 downloads

Overlays 1

LightboxThumbnails that open full-screen, with captions, a counter, the arrow keys, swipes and focus put back.overlaymediaimageinteractive5 views · 6 downloads

Data 2

FilePreviewA 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 downloadsMapViewA map (Leaflet's) with prices or dots for places on a list, one picked, and a pin to drag where something is.mediadatainteractive7 views · 7 downloads

Media 24

AudioPlayerAn audio clip with play, a seek bar that says the time, and a button cycling through playback speeds.mediaaudiointeractive6 views · 7 downloadsCameraCaptureTakes a photo with the camera into a hidden input as a data URL, with retake, and says so when there is no camera.mediaimageformsuploadinteractive6 views · 6 downloadsCoverImageA wide picture with a title, subtitle and actions over a gradient, in three heights.mediaimagemarketingpageno-js7 views · 7 downloadsEmbedFrameAnother page in a frame that keeps its shape and fills its width, with a title, permissions and a sandbox.medialayoutvideono-js5 views · 4 downloadsFigureAn image (or anything) with a caption and a credit under it, as a figure with its figcaption.mediaimagetypographyno-js8 views · 8 downloadsFileIconA file's icon by its extension, written on it and coloured by its kind: document, sheet, PDF, image, code and more.fileiconmediano-js6 views · 9 downloadsIconEighty common icons by name, drawn inline as SVG in the text's colour, in five sizes or any pixel size.iconmediano-js7 views · 6 downloadsIconGridEvery icon of the kit with its name in a grid, narrowed as you type, each one a click away from its name.iconmediasearchinteractive6 views · 7 downloadsImageAn image that keeps its shape while it loads, shimmering, and shows a fallback with its alt when it cannot.mediaimageloadinginteractive6 views · 8 downloadsImageCompareBefore and after pictures one over the other, with a divider to drag (or move with the keys) between them.mediaimagedraginteractive6 views · 9 downloadsImageCropA crop box over a picture, dragged and resized by its corners or the keys, with the crop in hidden inputs a form sends.mediaimageformsdraginteractive9 views · 6 downloadsImageGalleryA grid of thumbnails (the last can say "+N") opening a framed viewer with captions, next and previous, the keys and a strip.mediaimagegriddialoginteractive6 views · 7 downloadsImageHotspotsA picture with numbered points that show a note on hover or focus, with no script: a plan, a product, a photo.mediaimagepopoveraccessibilityno-js7 views · 6 downloadsLogoCloudA row of logos, grey until hovered, with a line saying what they are; each can be a link.marketingmediaimageno-js6 views · 5 downloadsMarqueeContent scrolling sideways without end, in CSS alone: seamless, paused on hover, still when motion is reduced.animationmarketingmediano-js8 views · 6 downloadsMediaCardA 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 downloadsPdfViewerA PDF in the page with the browser's own viewer, a bar with its name, open and download links, and a fallback.documentmediafileno-js6 views · 7 downloadsPlaylistNumbered 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 downloadsTickerA news ticker: a labelled strip of headlines sliding past, each a link when it has one, in CSS alone.animationnewsmediano-js6 views · 9 downloadsVideoPlayerA video with the kit's own controls: play, seek, time, volume, full screen and the keyboard.mediavideokeyboardinteractive7 views · 6 downloadsVolumeControlA mute button and a level slider with an icon that shows how loud it is; a real range, so forms and keyboards work.mediaaudioinputformsinteractive6 views · 7 downloadsYouTubeEmbedA YouTube video that loads nothing but its poster until the play button is clicked, then starts at once.mediavideointeractive6 views · 7 downloadsZoomImageA picture that zooms in where the pointer is; a click holds it, and the keyboard zooms and moves around too.mediaimagecommerceinteractive6 views · 4 downloads

Commerce 1

ProductGalleryA product's pictures: one large, the rest as thumbnails that switch it, with the arrow keys, swipes and a counter.commerceimagemediatabsinteractive6 views · 6 downloads

News 1

AdSlotAn advertisement's place kept at its size so the story never jumps: standard sizes by name, another on phones, a clear label, a placeholder, sticky in a rail.newslayoutadsmediano-js6 views · 8 downloads

Social 1

StoryRingA 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

Mobile 10

DoubleTapLikeDouble tap a photo card to like it, a heart bursting at the finger, with a plain Like button as the equal.mobileinteractivegesturelikemediatablet3 views · 5 downloadsDownloadsListItems with size, progress, pause and retry, the storage used, and a Wi-Fi only setting that holds to the network.mobileinteractivemediadownloadsnetworktablet3 views · 5 downloadsMiniPlayerA bar above the tabs with progress and play, expanding to the full player by a swipe up.mobileinteractivemediaplayeraudiotablet2 views · 5 downloadsNowPlayingA full player with art, scrub, queue, speed and a sleep timer, tied to the media session.mobileinteractivemediaplayeraudiotablet2 views · 5 downloadsPodcastQueueEpisodes reordered by a grip, with played state, resume position, downloads and the time remaining.mobileinteractivemediapodcastreordertablet1 view · 6 downloadsScrubBarA seek bar with a large touch area, fine scrubbing by moving a finger away from it, and a time bubble.mobileinteractivemediaseekaudiovideo4 views · 7 downloadsShortVideoFeedVertical swipes of clips: one plays at a time, the next loads ahead, sound behaves, and a refused autoplay shows a button.mobileinteractivemediavideofeedtablet4 views · 4 downloadsSleepTimerSheetStops playing after a set time, with a fade at the end and an extend while it runs.mobileinteractivemediatimersheetaudio3 views · 8 downloadsStoryViewerStories with segmented progress: hold to pause, tap to go on or back, swipe down to leave, with the next ones fetched ahead.mobileinteractivestoriesgesturemediatablet3 views · 7 downloadsSyncedLyricsLines lit by time, a tap to seek, and the lit line kept centred without jumps.mobileinteractivemedialyricsmusictablet4 views · 7 downloads

Utilities 1

LazyLoadPuts its content on the page only once it is scrolled near, holding its height until then.utilityloadingmediapageinteractive6 views · 7 downloads

Other tags

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