{"id":437,"date":"2014-07-17T07:27:19","date_gmt":"2014-07-17T07:27:19","guid":{"rendered":"https:\/\/starter.pixelgrade.com\/hivelt\/style-guide\/"},"modified":"2026-09-28T15:18:18","modified_gmt":"2026-09-28T15:18:18","slug":"style-guide","status":"publish","type":"page","link":"https:\/\/starter.pixelgrade.com\/hive-lt\/style-guide\/","title":{"rendered":"Style Guide"},"content":{"rendered":"\n

Style Guide<\/h1>\n\n\n\n

You can add an introductory larger size text to your articles by simply setting the paragraph style to lead<\/strong>. Put simply, larger text will usually be read before smaller text.<\/p>\n\n\n\n

Typography is more than just what fonts you use. Typography is everything that has to do with how the text looks\u2014such as font size, line length, color, and even more subtle things like the whitespace around a text. Good typography sets the tone of your written message and helps to reinforce its meaning and context.<\/p>\n\n\n\n

The purpose of this page is to help determine what default settings are with CSS and to make sure that all possible elements are included. For example we looked at headings. Lovely headings<\/strong>.<\/p>\n\n\n\n

Heading Two Formatting<\/h2>\n\n\n\n

D<\/span>ropcap<\/strong> can be added using the Drop cap toggle under the Typography section within sidebar. Instead of using the body text font, we use the display font from our titles. This also ties the two elements together if the display font works well with the body text.openers. You can also use a purely decorative font. There are thousands of decorative typefaces, and most of them aren\u2019t appropriate for use in a book\u2019s body text. <\/span><\/p>\n\n\n\n

\n

Blockquotes are a great way to display and format quotations. Insert beautiful quotes using the \u201cquote\u201d button<\/strong><\/em> from the visual editor. To add an author just wrap its name in a cite<\/strong><\/em> tag.<\/p>\nAuthor citation<\/cite><\/blockquote>\n\n\n\n

Are you still making bulleted and numbered lists<\/strong> by manually typing bullets or numbers at the beginning of each line? In the 21st century, this is a task no one should be doing by hand.<\/p>\n\n\n\n

\n
\n
    \n
  • We took a good long look<\/li>\n\n\n\n
  • At<\/li>\n\n\n\n
  • Unordered<\/li>\n\n\n\n
  • Lists.<\/li>\n<\/ul>\n<\/div>\n\n\n\n
    \n
      \n
    1. Also we took a good look<\/li>\n\n\n\n
    2. At<\/li>\n\n\n\n
    3. Lists<\/li>\n\n\n\n
    4. Of the ordered variety.<\/li>\n<\/ol>\n<\/div>\n<\/div>\n\n\n\n

      Heading Three<\/h3>\n\n\n\n

      This tag styles large blocks of code<\/strong>.<\/p>\n\n\n\n

      pre {\n\tmargin: 0 0 5px;\n\tfont-weight: bold;\n\tfont-size: 16px;\n\tline-height: 1.5;\n}<\/pre>\n\n\n\n
      Tables are useful for lay\u00adouts where text needs to be po\u00adsi\u00adtioned side-by-side or float\u00ading at spe\u00adcif\u00adic lo\u00adca\u00adtions on the page. If mak\u00ading these is frus\u00adtrat\u00ading with the usu\u00adal lay\u00adout tools, try us\u00ading a table.<\/p>\n\n\n\n
      Type<\/strong><\/td>Font<\/strong><\/td>Description<\/strong><\/td><\/tr>
      Humanist<\/strong><\/td>Sabon<\/td>Closely connected to calligraphy<\/td><\/tr>
      Transitional<\/strong><\/td>Baskerville<\/td>More abstract and less organic<\/td><\/tr>
      Modern<\/strong><\/td>Bodoni<\/td>Note the thin, straight serifs<\/td><\/tr>
      Slab Serif<\/strong><\/td>Clarendon<\/td>Egyptian typefaces have heavy serifs<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
      To accentuate a text<\/strong><\/em>, you simply need to apply to it both methods of emphasis: bold<\/strong> and italic<\/em> altogether.<\/p>\n\n\n\n
      You can also highlight a text<\/mark> using the Highlight<\/em> text style option with any background color. Apply only a text color<\/strong><\/mark> to apply an alternative highlight styling.<\/p>\n\n\n\n
      Image Styles<\/h3>\n\n\n\n
      Welcome to image alignment!<\/strong> The best way to demonstrate the ebb and flow of the various image positioning options is to nestle them snuggly among an ocean of words. Grab a paddle and let\u2019s get started.<\/p>\n\n\n\n
      \"\"
      The image above happens to be a centered full-width example.<\/figcaption><\/figure>\n\n\n\n
      The rest of this paragraph is filler for the sake of seeing the text wrap around a right aligned image<\/strong>.<\/p>\n\n\n\n
      \"style-guide-right-aligned\"<\/figure><\/div>\n\n\n\n
      As you can see there should be some space above, below, and to the left of the image. The text should not be creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like you words.As you can see there should be some space above, below, and to the left of the image. The text should not be creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like you words.<\/span><\/p>\n\n\n\n
      Let them do their jobs without any hassle from the text. In about one more sentence here, we\u2019ll see that the text moves from the right of the image down below the image in seamless transition.<\/p>\n\n\n\n
      Don\u2019t let anyone else tell you differently. In just a bit here, you should see the text start to wrap below the left aligned image and settle in nicely. There should still be plenty of room and everything should be sitting pretty. Yeah\u2026 Just like that. It never felt so good to be right.<\/p>\n\n\n\n
      Let them do their jobs without any hassle from the text. In about one more sentence here, we\u2019ll see that the text moves from the right of the image down below the image in seamless transition.<\/p>\n\n\n\n
      And now we\u2019re going to shift things to the left align. Again, there should be  plenty of room above, below, and to the right of the image. Just look at him there\u2026 Hey guy! Way to rock that left side. I don\u2019t care what the right aligned image says, you look great.<\/p>\n\n\n\n
      \"Left
      Left aligned image with caption
      Credits to Laurent Nivalle.<\/figcaption><\/figure><\/div>\n\n\n\n
      Don\u2019t let anyone else tell you differently. In just a bit here, you should see the text start to wrap below the left aligned image and settle in nicely. There should still be plenty of room and everything should be sitting pretty. Yeah\u2026 Just like that. It never felt so good to be right.<\/p>\n\n\n\n
      And that\u2019s a wrap, yo! You survived the tumultuous waters of alignment. In just a bit here, you should see the text start to wrap below the right aligned image and settle in nicely. There should still be plenty of room and everything should be sitting pretty.<\/p>\n","protected":false},"excerpt":{"rendered":"
      Style Guide You can add an introductory larger size text to your articles by simply setting the paragraph style to lead. Put simply, larger text […]<\/p>\n","protected":false},"author":4,"featured_media":440,"parent":0,"menu_order":2,"comment_status":"open","ping_status":"open","template":"","meta":{"novablocks_hero_scroll_indicator":false,"novablocks_hero_position_indicators":false,"supernova_prevent_duplicate":false,"inline_featured_image":false,"_project_color":"","_project_color_auto":"#6e513e","footnotes":""},"class_list":["post-437","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\nStyle Guide - Hive<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/starter.pixelgrade.com\/hive-lt\/style-guide\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Style Guide\" \/>\n<meta property=\"og:description\" content=\"Style Guide You can add an introductory larger size text to your articles by simply setting the paragraph style to lead. Put simply, larger text […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/starter.pixelgrade.com\/hive-lt\/style-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"Hive\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-28T15:18:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/starter.pixelgrade.com\/hive-lt\/wp-content\/uploads\/sites\/10\/2021\/12\/style-guide-full-width-1-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/starter.pixelgrade.com\/hive-lt\/style-guide\/\",\"url\":\"https:\/\/starter.pixelgrade.com\/hive-lt\/style-guide\/\",\"name\":\"Style Guide - Hive\",\"isPartOf\":{\"@id\":\"https:\/\/starter.pixelgrade.com\/hive-lt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/starter.pixelgrade.com\/hive-lt\/style-guide\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/starter.pixelgrade.com\/hive-lt\/style-guide\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/starter.pixelgrade.com\/hive-lt\/wp-content\/uploads\/sites\/10\/2021\/12\/style-guide-full-width-1-1.jpg\",\"datePublished\":\"2014-07-17T07:27:19+00:00\",\"dateModified\":\"2026-09-28T15:18:18+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/starter.pixelgrade.com\/hive-lt\/style-guide\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/starter.pixelgrade.com\/hive-lt\/style-guide\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/starter.pixelgrade.com\/hive-lt\/style-guide\/#primaryimage\",\"url\":\"https:\/\/starter.pixelgrade.com\/hive-lt\/wp-content\/uploads\/sites\/10\/2021\/12\/style-guide-full-width-1-1.jpg\",\"contentUrl\":\"https:\/\/starter.pixelgrade.com\/hive-lt\/wp-content\/uploads\/sites\/10\/2021\/12\/style-guide-full-width-1-1.jpg\",\"width\":1920,\"height\":1080,\"caption\":\"The image above happens to be a centered full-width example.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/starter.pixelgrade.com\/hive-lt\/style-guide\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/starter.pixelgrade.com\/hive-lt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Style Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/starter.pixelgrade.com\/hive-lt\/#website\",\"url\":\"https:\/\/starter.pixelgrade.com\/hive-lt\/\",\"name\":\"Hive\",\"description\":\"Magazine\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/starter.pixelgrade.com\/hive-lt\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Style Guide - Hive","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/starter.pixelgrade.com\/hive-lt\/style-guide\/","og_locale":"en_US","og_type":"article","og_title":"Style Guide","og_description":"Style Guide You can add an introductory larger size text to your articles by simply setting the paragraph style to lead. Put simply, larger text […]","og_url":"https:\/\/starter.pixelgrade.com\/hive-lt\/style-guide\/","og_site_name":"Hive","article_modified_time":"2026-09-28T15:18:18+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/starter.pixelgrade.com\/hive-lt\/wp-content\/uploads\/sites\/10\/2021\/12\/style-guide-full-width-1-1.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/starter.pixelgrade.com\/hive-lt\/style-guide\/","url":"https:\/\/starter.pixelgrade.com\/hive-lt\/style-guide\/","name":"Style Guide - Hive","isPartOf":{"@id":"https:\/\/starter.pixelgrade.com\/hive-lt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/starter.pixelgrade.com\/hive-lt\/style-guide\/#primaryimage"},"image":{"@id":"https:\/\/starter.pixelgrade.com\/hive-lt\/style-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/starter.pixelgrade.com\/hive-lt\/wp-content\/uploads\/sites\/10\/2021\/12\/style-guide-full-width-1-1.jpg","datePublished":"2014-07-17T07:27:19+00:00","dateModified":"2026-09-28T15:18:18+00:00","breadcrumb":{"@id":"https:\/\/starter.pixelgrade.com\/hive-lt\/style-guide\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/starter.pixelgrade.com\/hive-lt\/style-guide\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/starter.pixelgrade.com\/hive-lt\/style-guide\/#primaryimage","url":"https:\/\/starter.pixelgrade.com\/hive-lt\/wp-content\/uploads\/sites\/10\/2021\/12\/style-guide-full-width-1-1.jpg","contentUrl":"https:\/\/starter.pixelgrade.com\/hive-lt\/wp-content\/uploads\/sites\/10\/2021\/12\/style-guide-full-width-1-1.jpg","width":1920,"height":1080,"caption":"The image above happens to be a centered full-width example."},{"@type":"BreadcrumbList","@id":"https:\/\/starter.pixelgrade.com\/hive-lt\/style-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/starter.pixelgrade.com\/hive-lt\/"},{"@type":"ListItem","position":2,"name":"Style Guide"}]},{"@type":"WebSite","@id":"https:\/\/starter.pixelgrade.com\/hive-lt\/#website","url":"https:\/\/starter.pixelgrade.com\/hive-lt\/","name":"Hive","description":"Magazine","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/starter.pixelgrade.com\/hive-lt\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/starter.pixelgrade.com\/hive-lt\/wp-json\/wp\/v2\/pages\/437","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/starter.pixelgrade.com\/hive-lt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/starter.pixelgrade.com\/hive-lt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/starter.pixelgrade.com\/hive-lt\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/starter.pixelgrade.com\/hive-lt\/wp-json\/wp\/v2\/comments?post=437"}],"version-history":[{"count":6,"href":"https:\/\/starter.pixelgrade.com\/hive-lt\/wp-json\/wp\/v2\/pages\/437\/revisions"}],"predecessor-version":[{"id":754,"href":"https:\/\/starter.pixelgrade.com\/hive-lt\/wp-json\/wp\/v2\/pages\/437\/revisions\/754"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/starter.pixelgrade.com\/hive-lt\/wp-json\/wp\/v2\/media\/440"}],"wp:attachment":[{"href":"https:\/\/starter.pixelgrade.com\/hive-lt\/wp-json\/wp\/v2\/media?parent=437"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}