Quillo.qweComponents

Tags

#layout

59 components tagged layout. Narrow them down with a search or more tags.

Layout 35

ActionBarA page's main action and a line about it, fixed to the bottom of the screen on a phone.layoutbuttonformsinteractive13 views · 6 downloadsAppShellAn app's frame: a sidebar of links, a top bar and the page; the sidebar is a drawer on phones.layoutpagenavigationno-js10 views · 7 downloadsAspectRatioKeeps 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 downloadsBentoGridA grid of tiles spanning columns and rows, with titles, tints and links, packed to leave no holes.layoutgridcardmarketingno-js9 views · 6 downloadsBrowserFrameA mock browser window around its content, with the address in its bar, for screenshots and demos.layoutmediaimagemarketingno-js7 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 downloadsCenterPuts its content in the middle: a column capped in width, a thing centred by its own width, or centred text.layoututilityno-js7 views · 7 downloadsClusterThings in a row that goes on to the next line when it runs out of room, with gap and alignment.layoutlistno-js6 views · 8 downloadsCollapsibleA block shown and hidden under a line you click, on the browser's own <details>; open by default or not.layoutnavigationaccessibilityno-js7 views · 6 downloadsColumnsChildren side by side, equal or weighted, that go one under another when their box is narrow.layoutgridno-js7 views · 9 downloadsContainerKeeps content at a readable width, centred, with room at the sides on small screens.layoutno-js9 views · 5 downloadsCoverA block as tall as the screen with one thing in its middle, and something at its top and bottom if given.layoutpagemarketingno-js7 views · 7 downloadsDividerA line between parts of a page, across or upright, with a label in the middle if it has one.layoutno-js7 views · 8 downloadsDockA floating bar of icon buttons fixed to the bottom or a side of the page, with badges and the current one marked.layoutnavigationmobilebuttonno-js6 views · 7 downloadsFieldsetA <fieldset> with a legend and a line about it, its fields stacked, in a row or in a grid; disabled as one.layoutformsinputaccessibilityno-js6 views · 7 downloadsFooterA site's footer: brand and tagline, columns of links under titles, and a bottom line with the small print.layoutpagenavigationlinkno-js6 views · 6 downloadsGridColumns that fit the screen: as many as fit a minimum width, or a fixed number that folds on phones.layoutgridno-js6 views · 7 downloadsInsetRoom around what it holds, in the kit's sizes or pixels, on every side or only across or down.layoututilityno-js4 views · 7 downloadsMasonryCards of different heights packed into columns, each filled from the top, on CSS columns alone.layoutgridcardno-js6 views · 7 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 downloadsNavbarThe bar along the top of a site: name, links and actions; the links fold into a menu when narrow.navigationlayoutmenuno-js5 views · 6 downloadsPageHeaderA page's top: breadcrumb, title, a line about it, small facts and the actions, with room under it for tabs.layoutpagenavigationno-js7 views · 5 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 downloadsReelA strip that scrolls sideways and snaps to each item, with a slim scrollbar or none, and the keyboard.layoutlistmobileno-js4 views · 5 downloadsResizableBoxA box the user resizes by dragging its corner or an edge, within limits, with the keyboard too.layoutdragkeyboardutilityinteractive5 views · 5 downloadsScrollAreaA box with its own scrollbars and a height limit, fading at the edges where there is more to see.layoututilityaccessibilityno-js6 views · 7 downloadsSectionA part of a page under its title and a line about it, kept to a readable width, with room above and below.layoutsectionpageno-js6 views · 5 downloadsSidebarLayoutContent beside a sidebar, left or right, that goes under the content where its box is narrow.layoutpagenavigationno-js5 views · 6 downloadsSpacerEmpty room between things, down a column or along a row, in the kit's sizes or pixels, or growing to push things apart.layoututilityno-js5 views · 6 downloadsSplitterTwo panes with a divider to drag between them, across or stacked, with the keyboard too.layoutdraginteractive6 views · 6 downloadsStackA column or a row of things, evenly spaced, aligned and wrapped as you choose.layoutno-js5 views · 6 downloadsStackedLayoutHeader, content and footer in three bands, the footer kept at the bottom of the viewport when the content is short.layoutpageno-js5 views · 7 downloadsStickyKeeps what it holds in view at an offset from the top, or the bottom, while the rest scrolls past.layoututilityno-js5 views · 6 downloadsSwitcherChildren side by side until the row would be too narrow, then each on its own line, with no in-between.layoutgridno-js6 views · 6 downloadsToolbarA row of controls reached by Tab once and moved through with the arrow keys; it wraps when narrow.layoutbuttonno-js5 views · 7 downloads

Typography 2

LineClampText cut after N lines with an ellipsis, with the whole text in its title.typographytextlayoutno-js4 views · 6 downloadsTruncateText kept to one line and cut with an ellipsis at the end or the middle, with the whole text in its title.typographytextlayoutno-js5 views · 6 downloads

Forms 4

FormA plain <form method="post"> laid out stacked, inline or in a grid, with a summary of what is wrong at the top and a submit row at the end.formslayoutno-js6 views · 8 downloadsFormActionsThe row of submit and cancel buttons at the end of a form, aligned at the end, start, centre or both sides.formsbuttonlayoutno-js5 views · 4 downloadsFormFieldA label, a hint and an error around any control, with a required mark, the label beside or above it.formsinputlayoutno-js5 views · 5 downloadsFormRowFields side by side, equal or weighted, that stack one under another on a phone.formslayoutgridno-js5 views · 8 downloads

Navigation 1

FooterNavColumns of grouped links for a site's footer, each under its title, wrapping on narrow screens.navigationlinklayoutmarketingno-js5 views · 7 downloads

Media 2

EmbedFrameAnother page in a frame that keeps its shape and fills its width, with a title, permissions and a sandbox.medialayoutvideono-js5 views · 4 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 downloads

News 2

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 downloadsSectionFrontA section's front: the lead story large with its picture and dek, the next stories beside it, and a column of more headlines; one column where narrow.newslayoutarticlegridno-js9 views · 9 downloads

Marketing 1

HeroA landing page's opening: eyebrow, headline, lead, buttons, and a picture or code on the side.marketingsectionpagelayoutno-js6 views · 7 downloads

Dashboard 3

DashboardGridWidgets on a twelve-column grid, each spanning columns and rows (DashboardCell), stacking on a phone.dashboardlayoutgridno-js7 views · 9 downloadsSettingsSectionA titled block of settings rows, each a label and hint with its control at the right (SettingsRow).dashboardsettingsformslayoutlistno-js5 views · 5 downloadsWidgetA 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

Mobile 9

KeyboardAvoiderKeeps a focused field in view above the on-screen keyboard by visualViewport, on both systems, handing back on close.mobileinteractivekeyboardformslayout2 views · 6 downloadsPhoneShellThe whole app frame: header, scroller, tab bar, safe areas and keyboard handled once, for one fixed-height screen that does not bounce.mobileinteractivetabletlayoutapp-shelltabs2 views · 6 downloadsResponsiveSplitMaster and detail as one stack on a phone and side by side on a tablet, changing live on rotation and keeping the selection.mobileinteractivetabletlayoutmaster-detailrotation2 views · 5 downloadsRotationLayoutTwo arrangements of one set of children, upright and turned: no flash, and focus and scroll kept across the turn.mobiletabletinteractivelayoutrotationorientation3 views · 6 downloadsSafeAreaPads content for notches and home bars by env(), per side, with a view of the insets under a debug prop.mobileinteractivelayoutnotchtablet4 views · 7 downloadsSizeClassViewTells compact, medium and expanded widths by its own box, so Split View, Slide Over and a turn are one case, and swaps slots without losing what is in them.mobiletabletinteractivelayoutresponsivepanes1 view · 5 downloadsSplitViewTwo or three panes with a divider to drag, which give way by width, with the selection kept across a turn and a keyboard route for the divider.mobiletabletinteractivelayoutpanesresize3 views · 7 downloadsTabletSidebarA sidebar that folds to icons, then to an overlay, by width class, with sections, badges and a pin kept per device.mobiletabletinteractivenavigationsidebarlayout2 views · 3 downloadsThreeColumnViewMail's sidebar, list and detail: columns hide in order as width shrinks, a Back appears when they do, and the open item survives every change.mobiletabletinteractivelayoutmailcolumns4 views · 6 downloads

Other tags

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