All Median UI Typography Templates
Compose mode
This is the standard layout of Blogger posts in compose mode and all the features included in this mode. This mode is also responsive so several layouts such as images, blockquotes and so on will adjust the display based on the user's screen size.
Main Title (H1)
Title (H2)
Subtitles (H3)
Minor Title (H4)
Default template size text
Smallest font size text
Text in normal font size
Text with large font size
Text with a very large font size
Text with colour
Text with Background Colour
This paragraph is a standard template with no additional indents, the font size and line height have been set to make the text easier to read.
Second paragraph with additional indents found in Blogger compose mode
Third paragraph with an additional 2 indents which might have a little effect on the mobile display
The quote text paragraph will appear like this with a different text color than a regular paragraph
List or list on posts with numbers
- First list
- Second list
- Third list
- Fourth List
List or list with dots
- First list
- Second list
- Third list
- Fourth List
Paragraphs with additional anchor links and active links are added manually via compose mode.
Button
The link button is different to display important links such as download links, previews and so on. By default it will look like this:
Writing format:
<a class='button' href='your url'>Button</a>
Added a download icon on the button
Writing format:
<a class='button' href='your url'><i class='m-icon download'></i>Download</a>
Different styled buttons
Writing format:
<a class='button outline' href='your url'><i class='m-icon download'></i>Download</a>
Whatsapp link button
Writing format:
<a class='button whatsapp' href='your url'><i class='m-icon whatsapp'></i>Need Help?</a>
Two buttons in a row
Writing format:
<div class='button-info'> <a class='button' href='your url'><i class='m-icon download'></i>Download</a> <a class='button outline' href='your url'>Demo</a> </div>
Lazy youtube
Useful for loading YouTube videos after scrolling the page so that blog loading is even faster
Its use is very easy:
- Copy the youtube video playback code that you want to display
- Example of youtube video url: youtube.com/watch?v=s1tAYmMjLdY
- All you need to copy is the code " s1tAYmMjLdY " then paste it on the part that has been marked in this code
Writing format:
<div class='lazy-youtube' data-embed='rvrZJ5C_Nwg'> <div class='playBut'> <svg class='svg-play' viewbox='0 0 213.7 213.7'><polygon class='triangle' points='73.5,62.5 148.5,105.8 73.5,149.1'></polygon><circle class='circle' cx='106.8' cy='106.8' r='103.3'></circle></svg> </div> </div>
Post a Comment