image : https://storage.googleapis.com/nitoku-static/site-img/docs/tag-window.png title : TITLE BLOCK font-size : 25px color : #53977b image-height : 200px https://p101007003-dot-nitokucom.uc.r.appspot.com/frame/@nitoku.public/title?tk=pu&us=pu

 

 

This block renders a centered image with a small description, it is used for the titles of pages on Nitoku documentation.🔗

---

The following block definition 👇

image : https://storage.googleapis.com/nitoku-static/site-img/docs/online-support.png
title : ONLINE KNOWLEDGE MANAGEMENT
image-height : 100px

Will render the following title with a centered image 👇

image : https://storage.googleapis.com/nitoku-static/site-img/docs/online-support.png title : ONLINE KNOWLEDGE MANAGEMENT image-height : 100px https://p101007003-dot-nitokucom.uc.r.appspot.com/frame/@nitoku.public/title?tk=pu&us=pu

 

 

Block attributes🔗

---

Find below the complete list of attributes for this block:

color : set the color for the fonts on the text.
title : set the text for the title
icon : specify the font-awesome icon to be used
font-size: set the font-size of text
max-width: set the maximum width of the title
image : specify the image to be used
image-height : set the height of the title image

 

This block uses version 4.7 of the <strong>Font awesome</strong> library you could find the list of available icons here: <a href='https://fontawesome.com/v4.7.0/icons/'>Font awesome icons<a> https://p101007003-dot-nitokucom.uc.r.appspot.com/frame/@nitoku.public/info?tk=pu&us=pu <strong>If you set the image attribute it is highly recommended that you also set the image-height attribute. </strong><br><br> Without this attribute the block need to calculate the size after the image has loaded and then change the height of the block, this will create an ugly visual effect when the page is loading where the image may not be shown on his enterity during the first second of page load. https://p101007003-dot-nitokucom.uc.r.appspot.com/frame/@nitoku.public/warning?tk=pu&us=pu

 

 

Sample 1. Configuring the color of your block title🔗

---

The following block definition 👇

image : https://storage.googleapis.com/nitoku-static/site-img/docs/online-support.png
title : ONLINE KNOWLEDGE MANAGEMENT
color : #676a6c
image-height : 100px

Will render the following title using #676a6c color 👇

image : https://storage.googleapis.com/nitoku-static/site-img/docs/online-support.png title : ONLINE KNOWLEDGE MANAGEMENT color : #676a6c image-height : 100px https://p101007003-dot-nitokucom.uc.r.appspot.com/frame/@nitoku.public/title?tk=pu&us=pu

 

 

Sample 2. Using font awesome icons on your block title🔗

---

The following block definition 👇

icon : fa-calendar
title : THE EASIEST WAY TO CREATE ONLINE CONTENT

Will render the following title with the font awesome calendar icon 👇

icon : fa-calendar title : THE EASIEST WAY TO CREATE ONLINE CONTENT https://p101007003-dot-nitokucom.uc.r.appspot.com/frame/@nitoku.public/title?tk=pu&us=pu

 

 

Sample 3. Setting color and size of font awesome icons.🔗

---

The following block definition 👇

icon : fa-calendar
title : THE EASIEST WAY TO CREATE ONLINE CONTENT
color : #676a6c
image-height : 200px 
font-size: 30px

Will render the following title using #676a6c color 👇

icon : fa-calendar title : THE EASIEST WAY TO CREATE ONLINE CONTENT color : #676a6c image-height : 200px font-size: 30px https://p101007003-dot-nitokucom.uc.r.appspot.com/frame/@nitoku.public/title?tk=pu&us=pu

 

 

Sample 4. Setting the font size and max paragraph width.🔗

---

The following block definition 👇

image : https://img.icons8.com/carbon-copy/200/676a6c/online-support.png
title : THE EASIEST WAY TO CREATE ONLINE CONTENT
color : #676a6c
font-size: 30px
max-width: 350px
image-height : 200px

Will render the following title using font-size of 30 pixels and max width of 350 pixels 👇

image : https://storage.googleapis.com/nitoku-static/site-img/docs/online-support.png title : THE EASIEST WAY TO CREATE ONLINE CONTENT color : #676a6c font-size: 30px max-width: 350px image-height : 200px https://p101007003-dot-nitokucom.uc.r.appspot.com/frame/@nitoku.public/title?tk=pu&us=pu

 

 

https://p101007003-dot-nitokucom.uc.r.appspot.com/frame/@nitoku.design/license?tk=pu&us=pu