Quillo.qweComponents

Tags

#typography

32 components tagged typography. Narrow them down with a search or more tags.

Typography 24

AbbrAn abbreviation whose expansion shows in a bubble on hover or focus and is read out by screen readers.typographytextaccessibilityno-js6 views · 5 downloadsBlockquoteA quotation with the person and the source in a figure, as a bar, with a quote mark, or plain.typographytextdocumentno-js6 views · 7 downloadsBulletListAn unordered list with dot, tick, arrow, star, dash or any glyph bullets, in a tone and a spacing.typographylisttextno-js6 views · 8 downloadsCalloutA highlighted aside with an icon and a title, as a note, tip, warning, important point or caution.typographydocumentfeedbackno-js6 views · 6 downloadsCaptionSmall muted text under a figure, a table or a field, as the right element for each.typographytextimageno-js5 views · 8 downloadsCheckListItems shown done or not with ticks and crosses (or empty circles), read-only, with an optional count.typographyliststatusno-js5 views · 8 downloadsDropCapA paragraph whose first letter is set large and dropped into the first two, three or four lines.typographytextdocumentno-js5 views · 6 downloadsEyebrowA small uppercase label above a heading, in a tone, with an optional dot.typographytextmarketingno-js6 views · 9 downloadsFootnoteA numbered footnote mark in the text and the list of notes at the end, each linking to the other.typographytextdocumentlinkno-js6 views · 6 downloadsGradientTextText filled with a gradient: the theme's, a preset, or any two colours at an angle.typographytextmarketingno-js5 views · 7 downloadsHeadingA title from <h1> to <h6> in the kit's sizes, with a subtitle and a link to itself shown on hover.typographytextpageno-js5 views · 9 downloadsInlineCodeA code span in running text, and a variant that copies its text when clicked.typographycodetextinteractive4 views · 9 downloadsKbdA key or a key combination (⌘K, Ctrl+Shift+P) as <kbd> elements, with symbols for the modifiers.typographykeyboardtextno-js5 views · 8 downloadsLeadA lede paragraph, larger and lighter than the body text, in two sizes and three alignments.typographytextdocumentno-js7 views · 9 downloadsLineClampText cut after N lines with an ellipsis, with the whole text in its title.typographytextlayoutno-js4 views · 6 downloadsLinkA styled link that shows an icon and opens a new tab when it leaves the site, with underline and tone variants.typographylinknavigationno-js7 views · 9 downloadsMarkHighlighted text in tones, as a real <mark>, filled or underlined.typographytextsearchno-js4 views · 9 downloadsMarkdownViewA small Markdown subset (headings, emphasis, links, lists, code, quotes) rendered safely as markup, in Quillo, with no HTML let through.typographytextdocumentcodeno-js4 views · 9 downloadsOrderedListA numbered list with styled counters: numbers, circles, letters or roman numerals, from any start.typographylisttextno-js5 views · 6 downloadsProseStyles for a block of article HTML (from markdown() or by hand): headings, lists, links, quotes, code, tables.typographytextdocumentno-js6 views · 5 downloadsPullquoteA line lifted from an article, set large beside the column with the text flowing around it, or across it.typographytextdocumentno-js5 views · 7 downloadsReadMoreText cut after N lines with a Read more / Show less button, left out when the text fits.typographytextbuttoninteractive5 views · 6 downloadsTextA paragraph or span in the kit's sizes, weights, tones and alignments, so prose matches the components.typographytextno-js6 views · 7 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 1

FontPickerA drop-down of fonts, each option drawn in itself, with a preview line in the one chosen.formsselectpickertypographyno-js5 views · 8 downloads

Media 1

FigureAn image (or anything) with a caption and a credit under it, as a figure with its figcaption.mediaimagetypographyno-js8 views · 9 downloads

Commerce 1

PriceAn amount written in its currency, with the old price struck through and the discount worked out.commercepriceno-jstypography6 views · 6 downloads

News 1

ArticleHeaderThe top of a story: its label and section, the headline, the dek, every author grouped by role, published and updated times, and the reading time.newsarticletypographybylineno-js8 views · 9 downloads

Blogging 3

PostHeaderThe top of a post: category, title and standfirst, the authors with their pictures, published and updated dates, reading time, tags and a cover.bloggingarticletypographyheaderno-js8 views · 6 downloadsReaderSettingsA post's text the way each reader likes it: size, serif or sans, line length, line spacing and light or dark, kept for their next visit.bloggingsettingstypographyaccessibilityinteractive9 views · 7 downloadsSidenoteNotes in the margin beside the line they belong to, numbered or not; on a narrow page they fold, and the number opens each under its line.bloggingtypographyarticlenotesno-js8 views · 8 downloads

Utilities 1

ReadingTime"4 min read", worked out from a text or a word count, with the wording and the reading speed yours to set.utilitytexttimetypographyno-js6 views · 8 downloads

Other tags

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