UI Components and Typography

Looking for 2.6.5 Docs? Take a look at old documentation.

Table of Contents

Related Posts

Most of these features can only be used in 'HTML View' mode, nor can you switch to 'Writing view' mode while using some of these features.

1. In post editor view, click icon at the bottom right of the title.
2. Two options will appear: HTML view and Writing view.
3. Select 'HTML View'.
4. Copy and paste the component code wherever you want to add it and make appropriate changes.

Paragraph

Use p tag to add paragraphs to the article.

<!--[ Paragraph ]-->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

Paragraph with Text Indent

This feature functions to make the first line of a paragraph indented with a predetermined value. You can also apply it to several other paragraphs.

<!--[ Text Indent paragraph ]-->
<p class='pIndent'>Your_paragraph_is_here.</p>

Paragraph with Drop Cap

The drop cap will resize the first letter of the paragraph so that it drops one or more lines down. Many types of print media use drop caps such as books, magazines, newspapers and so on because they can add to the visual appeal.

Mis a large capital letter used as a decorative element at the beginning of a paragraph or section. The size of the descending limit is usually two or more lines.

<!--[ Drop Cap paragraph ]-->
<p><span class='dropCap'>Y</span>our_paragraph_is_here.</p>

Post Reference Paragraph

To write a list of references or footnotes below the post.

Source:
www.example.com

<!--[ Post Reference paragraph ]-->
<p class='pRef'>Source:<br/> www.example.com</p>

Post Image

Following is a standard image without any container which means there will be no lightbox for this image.

<!--[ Standard image ]-->
<img class='full' alt='alt_here' width='1280' height='720' src='image_link'/>

Tips!
Have you noticed the classname full? Adding this classname to img tag removes horizontal margin and adapts full screen width in Mobile Devices.

Good to know:

• We recommend adding alt, width and height attributes to img tags.

Image with Caption

The caption in this image will not be read in the article description/snippet. You can also choose to keep the captions legible on the article snippets.

The image caption is here! Where were you looking for it?

<!--[ Image with Caption ]-->
<table class='tr-caption-container'>
  <tbody>
    <tr>
      <td>
        <img alt='image_alt' src='image_link'/>
      </td>
    </tr>
    <tr>
      <td class='tr-caption'>caption_here</td>
    </tr>
  </tbody>
</table>

You might be wondering why should you use the table tag just for adding caption to image even though there are figure and figcaption HTML tags available?

Let me sort it out for you! It is because when we add caption to an image through Blogger post editor and not manually by editing HTML, it uses the above code snippet for an image having caption. Therefore, it is necessary to support them.

You can also use the figure and figcaption tags instead of table tag as shown below.

Image caption using figcaption tag.

<!--[ Image with Caption ]-->
<figure>
  <img alt='image_alt' src='image_src'/>
  <figcaption>caption_here</figcaption>
</figure>

Image with Automatic Lightbox

Lighbox helps to scale the image up and make it fully focusable on click. The lightbox also contains the contents of alt attribute of the image when it appears on image click.

Where are you finding the lightbox? Click on this image!

Good to know:

• All the images in the post will automatically have a lightbox function if the image is wrapped under a parent container having one of the classnames lbx, separator, psImg, btImg, glImg or satisfies one of the selectors .pS .separator >a, .pS .tr-caption-container td >a, .pS .separator >img, .pS .tr-caption-container td >img, figure img.
• If an image with lightbox is wrapped under anchor tag, clicking on image will only open link when lightbox is shown.
• To explicitly opt-out automatic lightbox function for a particular image, add attribute data-lightbox='false' to the img tag.
• To explicitly opt-out lightbox automatically containing the alt attribute contents, add attribute data-caption='false' to the img tag.

Images with Grid Layout

Grid layout in the context of images typically refers to arranging multiple images in a structured grid format on a webpage or in a document. This layout is popular for galleries, portfolios, or any collection of images where you want to display several images in a neat and organized manner.

<!--[ Images with Grid Layout ]-->
<div class='psImg grImg'>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
</div>

Images with Show All Function

Used to hide some images and will be shown when the user clicks the Show All button. Show All function can only be activated once, images cannot be hidden again when you activate it.

Show All

<!--[ Images with Show All Function ]-->
<input hidden class='inImg' id='for-hideImage-1' type='checkbox'>
<div class='psImg hdImg'>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
  
  <div class='btImg'>
    <!--[ Image acting as a button ]-->
    <img alt='image_alt' src='image_link'/>
    
    <!--[ Button to activate ]-->
    <label for='for-hideImage-1' aria-label='Show all images'>Show All</label>
  </div>

  <!--[ Hide the rest of images here ]-->
  <div class='psImg shImg'>
    <img alt='image_alt' src='image_link'/>
    <img alt='image_alt' src='image_link'/>
    <img alt='image_alt' src='image_link'/>
    <img alt='image_alt' src='image_link'/>
  </div>
</div>

Images with Scroll Layout

Images with scroll layout typically refers to a design technique where images are displayed in a horizontally or vertically scrolling manner within a container. This approach is often used when you have a collection of images that may exceed the available space on the screen, and you want users to be able to scroll through them.

<!--[ Images with Scroll Layout (Type 1) ]-->
<div class='glImg'>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
</div>

Tips!
You can change the height of the scroll image by adding one of the classnames h150, h200, h250, to the element div.galWrp.

Here is another scroll layout style but it will only be active in mobile view. Please try opening this page on your mobile device.

<!--[ Images with Scroll Layout (Type 2) ]-->
<div class='psImg scImg scrlH'>
  <img alt='image_alt' src=''image_link'/>
  <img alt='image_alt' src=''image_link'/>
  <img alt='image_alt' src=''image_link'/>
  <img alt='image_alt' src=''image_link'/>
</div>

Lazyload Image

Useful for delaying loading images so that the blog's PageSpeed score is higher, image will only load when user scrolls to the image area. This feature uses @aFarkas/lazysizes to lazyload images.

<!--[ Lazyload Image ]-->
<img class='lazyload' alt='image_title' data-src='image_link' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>

Warning!
Never manually lazyload the first image of the post. Doing so, results in unexpected behaviours.

External Link

Notifies users if the link will lead to another site.

External Link

<a class='extL' href='link_here' rel='noreferrer' target='_blank'>link_title</a>

Alternative style:

External Link

<a class='extL alt' href='link_here' rel='noreferrer' target='_blank'>External Link</a>

Button

link_title

<!--[ Button ]-->
<a class='button' href='link_here'>link_title</a>

link_title

<!--[ Button outlined ]-->
<a class='button ln' href='link_here'>link_title</a>

link_title

<!--[ Button with download icon ]-->
<a class='button' href='link_here'><i class='icon dl'></i>link_title</a>

link_title

<!--[ Button with demo icon ]-->
<a class='button' href='link_here'><i class='icon demo'></i>link_title</a>

Download Link

file_name.zip 200kb

<!--[ Download Box ]-->
<div class='dlBox'>
  <!--[ Change data-text='...' atribute to add new file type ]-->
  <span class='fT' data-text='zip'></span>
  <div class='fN'>
    <!--[ File name ]-->
    <span>file_name.zip</span>
    <span class='fS'>200kb</span>
  </div>

  <!--[ Download link (change href='...' atribute to add link download) ]-->
  <a class='button' aria-label='Download' href='link_here' rel='noreferrer' target='_blank'><i class='icon dl'></i></a>
</div>

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.

Anonymous

<!--[ Standard Blockquote ]-->
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.</p>
  <span>Anonymous</span>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.

Anonymous

<!--[ Blockquote (Style 1) ]-->
<blockquote class='s1'>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.</p>
  <span>Anonymous</span>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.

Anonymous

<!--[ Blockquote (Style 2) ]-->
<blockquote class='s2'>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.</p>
  <span>Anonymous</span>
</blockquote>

Note Block

This feature serves to add important info, warning sentences or highlight sentences, there are two styles as shown below.

Info!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.

<!--[ Note info ]-->
<p class='note'><b>Info!</b><br/>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>

Warning!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.

<!--[ Note warning ]-->
<p class='note wr'><b>Warning!</b><br/>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit.
</p>

Alert

Default A simple default alert - Lorem ipsum dolor sit amet.

<!--[ Alert default ]-->
<div class='alert'><b>Default</b>
  A simple default alert - Lorem ipsum dolor sit amet.
</div>

Outline A simple outline alert - Lorem ipsum dolor sit amet.

<!--[ Alert outlined ]-->
<div class='alert outline'><b>Outline</b>
  A simple outline alert - Lorem ipsum dolor sit amet.
</div>

Info! A simple info alert - Lorem ipsum dolor sit amet.

<!--[ Alert variant info ]-->
<div class='alert info'><b>Info!</b>
  A simple info alert - Lorem ipsum dolor sit amet.
</div>

Warning! A simple warning alert - Lorem ipsum dolor sit amet.

<!--[ Alert variant warning ]-->
<div class='alert warning'><b>Warning!</b>
  A simple warning alert - Lorem ipsum dolor sit amet.
</div>

Success! A simple success alert - Lorem ipsum dolor sit amet.

<!--[ Alert variant success ]-->
<div class='alert success'><b>Success!</b>
  A simple success alert - Lorem ipsum dolor sit amet.
</div>

Error! A simple error alert - Lorem ipsum dolor sit amet.

<!--[ Alert variant error ]-->
<div class='alert error'><b>Error!</b>
  A simple error alert - Lorem ipsum dolor sit amet.
</div>

Info! A simple info alert - Lorem ipsum dolor sit amet.

<!--[ Alert variant info outlined ]-->
<div class='alert info outline'><b>Info!</b>
  A simple info alert - Lorem ipsum dolor sit amet.
</div>

Warning! A simple warning alert - Lorem ipsum dolor sit amet.

<!--[ Alert variant warning outlined ]-->
<div class='alert warning outline'><b>Warning!</b>
  A simple warning alert - Lorem ipsum dolor sit amet.
</div>

Success! A simple success alert - Lorem ipsum dolor sit amet.

<!--[ Alert variant success outlined ]-->
<div class='alert success outline'><b>Success!</b>
  A simple success alert - Lorem ipsum dolor sit amet.
</div>

Error! A simple error alert - Lorem ipsum dolor sit amet.

<!--[ Alert variant error outlined ]-->
<div class='alert error outline'><b>Error!</b>
  A simple error alert - Lorem ipsum dolor sit amet.
</div>

Table

Using tables is a little more complicated in HTML, we recommend that you learn more about HTML tables before using them. The following is an example of a table with data:

Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000

<!--[ Table ]-->
<div class='table'>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
      </tr>
      <tr>
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
      </tr>
    </tbody>
  </table>
</div>

For table styles, you can add a classname to the .table element, including:

• cborder : border for the table container.
• bordered / noborder (choose one): table content border.
• clr / primary / warning / success / error : background heading table.
• stripped : table row stripped style.
• hovered : hover table row.
• mh100 / mhvh / mh200 / mh300 : max-height of the table.
• sp5 / sp10 / sp20 : table content padding

Syntax Highlighter

Used to define lines of computer code (HTML, CSS, Javascript, etc.) in posts.

<pre data-comment='.html' data-source='src/index.html'><code>code_here</code></pre>

code tag can be used to define inline code like this: code_here.

<code>code_here</code>

kbd tag can be used to define keyboard input like this: ⌘ + A.

<kbd>⌘ + A</kbd>

Good to know:

• All the code blocks are automatically highlighted using @highlightjs/highlight.js, one of the popular libraries for code highlighting and a custom plugin. Copy button and lines number are also automatically appended.
• The library is loaded if and only if there is atleast one code block in the post to make sure we don't make extra requests.
• Inline codes are also highlighted.
• <mark> tag can be used to wrap a part of code inside <code> tag to mark that part.

MultiTabs Syntax Highlighter

Used to group multiple code blocks together.

[HTML] code_here

[CSS] code_here

[JS] code_here

[JSON] code_here

<!--[ MultiTabs Syntax Highlighter ]-->
<div class='pre tabs'>
  <!--[ Active function ]-->
  <input id='preT1-1' type='radio' name='preTab1' checked=''/>
  <input id='preT1-2' type='radio' name='preTab1'/>
  <input id='preT1-3' type='radio' name='preTab1'/>
  <input id='preT1-4' type='radio' name='preTab1'/>
  
  <!--[ Header/title ]-->
  <div>
    <!--[ Change atribute data-text='...' to replace title ]-->
    <label for='preT1-1' data-text='HTML'></label>
    <label for='preT1-2' data-text='CSS'></label>
    <label for='preT1-3' data-text='JS'></label>
    <label for='preT1-4' data-text='JSON'></label>
  </div>

  <!--[ Content ]-->
  <pre class='preC1-1' data-source='src/index.html'><code>[HTML] code_here</code></pre>
  <pre class='preC1-2' data-source='src/style.css'><code>[CSS] code_here</code></pre>
  <pre class='preC1-3' data-source='src/main.js'><code>[JS] code_here</code></pre>
  <pre class='preC1-4' data-source='src/rules.json'><code>[JSON] code_here</code></pre>
</div>

Spoiler

Used to create interactive widgets that the user can open and close on demand. By default this widget is closed, will display the content in it when the user presses the command button. Any content can be included in this widget.

Spoiler:

text_here

<!--[ Spoiler ]-->
<details class='sp'>
  <summary data-show='Show all' data-hide='Hide all'>Spoiler:</summary>
  <div>
    <p>text_here</p>
  </div>
</details>

Accordion

Defines additional content that users can open and close on demand in groups, usually used for a list of questions or FAQs (Frequently Asked Questions).

Title_here

text_here

<!--[ Accordion ]-->
<details class='ac'>
  <summary>Title_here</summary>
  <div>
    <p>text_here</p>
  </div>
</details>

Title_here

text_here

<!--[ Accordion (Alternate) ]-->
<details class='ac alt'>
  <summary>Title_here</summary>
  <div>
    <p>text_here</p>
  </div>
</details>

Title_here

text_here

Title_here

text_here

Title_here

text_here

Title_here

text_here

<!--[ Accordion (Grouped) ]-->
<div class='showH'>
  <details class='ac'>
    <summary>Title_here</summary>
    <div>
      <p>text_here</p>
    </div>
  </details>
  <details class='ac'>
    <summary>Title_here</summary>
    <div>
      <p>text_here</p>
    </div>
  </details>
  <details class='ac alt'>
    <summary>Title_here</summary>
    <div>
      <p>text_here</p>
    </div>
  </details>
  <details class='ac alt'>
    <summary>Title_here</summary>
    <div>
      <p>text_here</p>
    </div>
  </details>
</div>

Table of Contents

The TOC (acronym of Table of Contents) helps users quickly navigate through the content of a webpage by providing direct links to different sections. This is especially useful for longer articles or pages with multiple distinct sections.

There are two ways to define a TOC.

Manual Table of Contents

Using Manual TOC is very complicated, you have to add a different id attribute in each heading tag and write it in content list.

Automatic Table of Contents

It is not very easy to use the Manual TOC, therefore we provide an Automatic TOC which looks for all the headings in the post and populate the content list in an organized manner.

Table of Contents

<!--[ Automatic Table of Contents ]-->
<details class='sp toc' open=''>
  <summary data-show='Show all' data-hide='Hide all'>Table of Contents</summary>  
  <div class='aToc'></div>
</details>

Related Posts

Manual Related Posts

You may want to read this post :

• post_title
• post_title
• post_title

<div class='pRelate'>
  <!--[ Related title ]-->
  <b>You may want to read this post :</b>
  <ul>
    <li><a href='post_link'>post_title</a></li>
    <li><a href='post_link'>post_title</a></li>
    <li><a href='post_link'>post_title</a></li>
  </ul>
</div>

Automatic Related Posts

Related Posts

<!--[ Automatic Related Posts ]-->
<details class='sp arp' open=''>
  <summary data-show='Show all' data-hide='Hide all'>Related Posts</summary>  
  <div class='aRel'></div>
</details>

Good to know:

• This feature shows a list of posts having a particular label.
• To specify a label, add attribute data-label='My Label' to .aRel element.
• If attribute data-label is not specified or there is no post with label specified in data-label, then it will fallback to a random label from the current post if it is unsed in a post otherwise fallback to random label from the blog if used in page.
• It will filter out the post which is being viewed.
• To set the maximum number of posts, add attribute data-max-posts='6', where 6 is the number of maximum posts.

Lazy YouTube

Loads iframe once the play button is clicked otherwise shows the thumbnail image as placeholder which is lazyloaded using @aFarkas/lazysizes.

<!--[ Lazy YouTube ]-->
<div class='lazyYt' data-embed='video_id'></div>

Defer YouTube

Defers iframe loading using @aFarkas/lazysizes.

<!--[ Defer YouTube ]-->
<div class='videoYt'>
  <iframe class='lazyload' data-src='https://www.youtube.com/embed/DT61L8hbbJ4' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' referrerpolicy='strict-origin-when-cross-origin' allowfullscreen=''></iframe>
</div>

Header Subtitle

Adds subtitle next to header title in a particular post or page.

<style>
  /* Custom Header subtitle */
  .headH::after{content:'Subtitle'}
</style>

Essentials

Explicit Post Snippet

Post snippet shows a few lines of text content of post. It automatically selects texts from beginning of the post. If you would like to set a custom post snippet, you can add the following code snippet at the beginning of the post:

<!--[ Explicitly sets post snippet ]-->
<div hidden='' aria-hidden='true'>post_snippet</div>

<!--more-->

Explicit Post Thumbnail

Blogger automatically selects the first image of the post as its thumbnail. If you would like to set custom post thumbnail which should not appear in the post, you can add the following code snippet at the beginning of the post:

<!--[ Explicitly sets post thumbnail ]-->
<!--[
  <div class='separator'><img src='image_src'/></div>
]-->

<!--more-->

You can set custom post snippet and post thumbnail by combining the above two code snippets as shown below:

<!--[ Explicitly sets post snippet ]-->
<div hidden='' aria-hidden='true'>post_snippet</div>

<!--[ Explicitly sets post thumbnail ]-->
<!--[
  <div class='separator'><img src='image_src'/></div>
]-->

<!--more-->