Plus UI – Component Class Documentation

Plus UI — Component Class Reference v3.x

All HTML classes and writing formats for the Plus UI Blogger Template — extracted from official documentation.

1. Paragraph

Standard Paragraph

<!--[ Paragraph ]-->
<p>This is a paragraph</p>

Text Indent .pIndent

Makes the first line of the paragraph indented.

<p class='pIndent'>This is a paragraph with text indent.</p>

Drop Cap .dropCap

Enlarges the first letter so it "drops" into the paragraph.

<p><span class='dropCap'>T</span>his is a paragraph with drop cap.</p>

Post Reference .pRef

For footnotes or source references below a post.

<p class='pRef'>Source:<br> www.example.com</p>

2. Post Images

Standard Image .full

Adding full removes horizontal margin and goes full-width on mobile.

<img class='full' alt='alt_here' width='1280' height='720' src='image_link'/>

Image with Caption (table method) .tr-caption-container / .tr-caption

Blogger's native caption format. Caption is excluded from post snippet.

<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>

Image with Caption (figure method)

<figure>
  <img alt='image_alt' src='image_src'/>
  <figcaption>caption_here</figcaption>
</figure>

Automatic Lightbox

All images inside containers with these classes get automatic lightbox:

Class / Selector	Notes
`.lbx`	Explicit lightbox wrapper
`.separator`	Blogger's default image wrapper
`.psImg`	Image set containers
`.btImg`	Button image area
`.glImg`	Gallery / scroll image
`figure img`	Any img inside <figure>
`data-lightbox='false'`	Opt-out lightbox on specific img
`data-caption='false'`	Opt-out caption from lightbox

Grid Image Layout .psImg.grImg

<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 .psImg.hdImg / .btImg / .psImg.shImg / .inImg

Hides extra images behind a "Show All" toggle button. One-time activation.

<input hidden class='inImg' id='hideImg1' 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 button ]-->
    <img alt='image_alt' src='image_link'/>
    <label for='hideImg1' aria-label='Show all images'>Show All</label>
  </div>

  <div class='psImg shImg'>
    <img alt='image_alt' src='image_link'/>
    <img alt='image_alt' src='image_link'/>
  </div>
</div>

Scroll Layout — Style 1 (mobile gallery) .glImg

Scroll layout active in mobile view only.

<div class='glImg'>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
</div>

Scroll Layout — Style 2 .psImg.scImg.scrlH

<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'/>
</div>

Lazyload Image .lazyload

Uses @aFarkas/lazysizes. Image loads when scrolled into view.

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

3. External Links & Buttons

External Link .extL

Notifies users the link leads to another site.

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

<!-- Alternate style -->
<a class='extL alt' href='link_here' rel='nofollow noreferrer noopener' target='_blank'>link_title</a>

<!-- Secondary style -->
<a class='extL sec' href='link_here' rel='nofollow noreferrer noopener' target='_blank'>link_title</a>

Button .button

<!-- Filled button -->
<a class='button' href='link_here'>Button Text</a>

<!-- Outlined button -->
<a class='button ln' href='link_here'>Button Text</a>

<!-- With download icon -->
<a class='button' href='link_here'><i class='icon dl'></i>Download</a>

<!-- With demo icon -->
<a class='button' href='link_here'><i class='icon demo'></i>Demo</a>

<!-- Two buttons in a row -->
<div class='btnF'>
  <a class='button ln' href='link_here'>Demo</a>
  <a class='button' href='link_here'><i class='icon dl'></i>Download</a>
</div>

4. Download Box

Download Link Box .dlBox / .fT / .fN / .fS

<div class='dlBox'>
  <!--[ data-text sets the file-type badge ]-->
  <span class='fT' data-text='zip'></span>
  <div class='fN'>
    <span>file_name.zip</span>
    <span class='fS'>200KiB</span>
  </div>
  <a class='button' aria-label='Download' href='link_here'
     rel='nofollow noreferrer noopener' target='_blank'>
    <i class='icon dl'></i>
  </a>
</div>

5. Blockquote

Class	Style
`<blockquote>` (no class)	Standard — quote + author span
`.s1`	Style 1 variant
`.s2`	Style 2 variant
`.pu_blq` + `data-author`	Social blockquote (v2.6)

<!-- Standard -->
<blockquote>
  <p>Quote text here.</p>
  <span>Author Name</span>
</blockquote>

<!-- Style 1 -->
<blockquote class='s1'>
  <p>Quote text here.</p>
  <span>Author Name</span>
</blockquote>

<!-- Style 2 -->
<blockquote class='s2'>
  <p>Quote text here.</p>
  <span>Author Name</span>
</blockquote>

6. Note Block & Alert

Note Block

Class	Style
`.note`	Info / default note
`.note.wr`	Warning note

<p class='note'><b>Info!</b><br/>
  Your info text here.
</p>

<p class='note wr'><b>Warning!</b><br/>
  Your warning text here.
</p>

Alert

Classes on `.alert`	Variant
`.alert`	Default filled
`.alert.outline`	Default outline
`.alert.info`	Info filled
`.alert.info.outline`	Info outline
`.alert.warning`	Warning filled
`.alert.warning.outline`	Warning outline
`.alert.success`	Success filled
`.alert.success.outline`	Success outline
`.alert.error`	Error filled
`.alert.error.outline`	Error outline

<div class='alert info'><b>Info!</b>
  A simple info alert - text here.
</div>

<div class='alert warning outline'><b>Warning!</b>
  A simple warning alert - text here.
</div>

7. Table

Wrap a <table> in .table for responsive + scrollable behavior.

Modifier Class	Effect
`.cborder`	Border on the container
`.bordered`	Borders on cells
`.noborder`	No cell borders
`.stripped`	Zebra/striped rows (v3.1.0+)
`.hovered`	Hover highlight on rows (v3.1.0+)
`.clr` / `.primary` / `.warning` / `.success` / `.error`	Heading background color
`.sticky`	Sticky header row
`.mh100` / `.mhvh` / `.mh200` / `.mh300`	Max-height variants (`mh100` = 100%)
`.sp5` / `.sp10` / `.sp20`	Cell padding sizes

<div class='table sticky bordered stripped hovered'>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
      </tr>
    </tbody>
  </table>
</div>

8. Steps

Numbered Steps .steps

<ol class='steps'>
  <li>First step description here.</li>
  <li>Second step description here.</li>
  <li>Third step description here.</li>
</ol>

9. Code Block

Code blocks use highlight.js for automatic syntax highlighting. Copy button and line numbers are appended automatically.

Element / Attribute	Purpose
`<pre data-comment='...'><code>`	Main code block with language label
`data-source='...'`	Shows a filename in the code header
`<code>`	Inline code
`<kbd>`	Keyboard input display
`language-js` on `<code>`	Force language detection
`<mark>`	Highlight a line (default color)
`<mark class='block'>`	Block-level highlight
`<mark class='gray\|red\|orange\|blue\|green\|gold\|purple'>`	Colored highlights
`<mark data-before='msg'>`	Label before the mark
`<mark data-after='msg'>`	Label after the mark

<!-- Block code -->
<pre data-comment='.html' data-source='src/index.html'><code>escaped_code_here</code></pre>

<!-- Inline code -->
<code>escaped_code_here</code>

<!-- Keyboard input -->
<kbd>⌘ + A</kbd>

⚠️ Always escape HTML inside <code>: replace & → &, < → <, > → >

Multi-tabs Code Block

<div class='pre tabs'>
  <!--[ Active function radio inputs ]-->
  <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'/>

  <!--[ Tab headers ]-->
  <div>
    <label for='preT1-1' data-text='HTML'></label>
    <label for='preT1-2' data-text='CSS'></label>
    <label for='preT1-3' data-text='JS'></label>
  </div>

  <!--[ Tab content panes ]-->
  <pre class='preC1-1' data-source='src/index.html'><code>HTML code</code></pre>
  <pre class='preC1-2' data-source='src/style.css'><code>CSS code</code></pre>
  <pre class='preC1-3' data-source='src/main.js'><code>JS code</code></pre>
</div>

Tab IDs must be unique per page. Increment the number suffix: preT1-1, preT2-1, etc.

10. Spoiler & Accordion

Spoiler (Toggle Show/Hide) .sp

<details class='sp'>
  <summary data-show='Show all' data-hide='Hide all'>Spoiler:</summary>
  <div>
    <p>Hidden content here.</p>
  </div>
</details>

Accordion .ac / .ac.alt

<!-- Single accordion -->
<details class='ac'>
  <summary>Title_here</summary>
  <div><p>Content here.</p></div>
</details>

<!-- Alternate icon style -->
<details class='ac alt'>
  <summary>Title_here</summary>
  <div><p>Content here.</p></div>
</details>

<!-- Grouped accordion -->
<div class='showH'>
  <details class='ac'>
    <summary>Title_here</summary>
    <div><p>Content here.</p></div>
  </details>
  <details class='ac alt'>
    <summary>Title_here</summary>
    <div><p>Content here.</p></div>
  </details>
</div>

FAQ with Schema.org Microdata

Can only be used once per post/page. Group all FAQs inside a single component.

<div class='showH' itemscope itemtype='https://schema.org/FAQPage'>
  <details class='ac' itemscope itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Question here?</summary>
    <div itemscope itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>Answer here.</p>
    </div>
  </details>
</div>

11. Table of Contents Widget

Automatic TOC .sp.toc / .aToc

Automatically scans and lists all headings in the post.

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

12. Related Posts

Manual Related Posts .pRelate

<div class='pRelate'>
  <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>
  </ul>
</div>

Automatic Related Posts .sp.arp / .aRel

Attribute on `.aRel`	Purpose
`data-label='My Label'`	Filter posts by a specific label
`data-max-posts='6'`	Max number of related posts shown

<details class='sp arp' open>
  <summary data-show='Show all' data-hide='Hide all'>Related Posts</summary>
  <div class='aRel' data-label='My Label' data-max-posts='6'></div>
</details>

13. Lazy YouTube

Lazy YouTube (thumbnail → iframe on click) .lazyYt

<!-- Default ratio (16/9) -->
<div class='lazyYt' data-embed='video_id'></div>

<!-- Custom ratio -->
<div class='lazyYt' style='--ratio: 4 / 3' data-embed='video_id'></div>

Defer YouTube (lazysizes iframe) .videoYt / .lazyload

<div class='videoYt'>
  <iframe class='lazyload'
    data-src='https://www.youtube.com/embed/video_id'
    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>

14. Essentials / Misc

Explicit Post Snippet

<div hidden aria-hidden='true'>Custom post snippet here.</div>

<!--more-->

Explicit Post Thumbnail (hidden image)

<!--[
  <div class='separator'><img src='image_src'/></div>
]-->

<!--more-->

Combined Snippet + Thumbnail

<div hidden aria-hidden='true'>post_snippet</div>

<!--[
  <div class='separator'><img src='image_src'/></div>
]-->

<!--more-->

Header Subtitle .headH::after

<style>
  .headH::after { content: 'Your Subtitle Here' }
</style>

15. v2.6 Legacy Components v2.6

These components are from the older v2.6 template. Some have deprecated class names. Use v3 equivalents when possible.

Social Blockquote

<blockquote class='pu_blq' data-author='Anonymous'>Quote text here.</blockquote>

Syntax Highlighter (manual colors)

This format is deprecated in v3. Use the v3 <pre><code> approach instead.

Tag / Class	Color
`<i class='red'>`	Red / orange
`<i class='blue'>`	Blue
`<i class='green'>`	Green
`<i class='gray'>`	Gray
`<i class='block'>`	Blue block

<div class='pre pu notranslate' data-text='.html'>
  <pre style='white-space:pre-wrap; max-height:none;'>Your_code_is_here</pre>
</div>

<!-- Auto highlight -->
<div class='pre hl notranslate' data-text='.html'>
  <pre style='white-space:pre-wrap; max-height:none;'>Your_code_is_here</pre>
</div>

Multi-tabs Code (v2.6)

<div class='pre tb'>
  <input class='prei hidden' id='preT-1' type='radio' name='preTab' checked>
  <input class='prei hidden' id='preT-2' type='radio' name='preTab'>
  <div class='preH tbHd scrlH'>
    <label for='preT-1' data-text='HTML'></label>
    <label for='preT-2' data-text='CSS'></label>
  </div>
  <div class='preC-1'><pre>HTML code</pre></div>
  <div class='preC-2'><pre>CSS code</pre></div>
</div>

Countdown Download Box

<div class='dldCo' id='download1'>
  <div class='dldBx'>
    <div class='dldTp'>
      <div class='dldIm' data-text='.png' style='background-image:url(image_url)'>
        <svg class='dldSv' viewBox='0 0 34 34'>
          <circle class='b' cx='17' cy='17' r='15.92' />
          <circle class='c dldPg' cx='17' cy='17' r='15.92' />
        </svg>
      </div>
      <div class='dldIn'>
        <span data-text='Name'>filename.png</span>
        <span data-text='Size'>3.05MB</span>
        <span data-text='Resolution'>1920×1080</span>
        <span data-text='Extension'>.png</span>
      </div>
    </div>
    <button onclick='download("#","10","false","#download1")' class='dldBt dldDl'>...</button>
    <button class='dldBt dldRt'>...</button>
  </div>
  <div class='dldSl'><div class='dldMe'></div></div>
</div>

Music Player

<div id='musicPlayer'></div>
<script>
  /*<![CDATA[*/
  var playerTracks = [
    {
      name: "Track Title",
      artist: "Artist Name",
      cover: "https://example.com/cover.jpg",
      source: "https://example.com/audio.mp3"
    }
  ];
  /*]]>*/
</script>

Osunhive

Osunhive ui