This post illustrates all the available HTML trappings you may use to add to your blog post. You can quickly insert any of the elements into your post by copying the simple HTML markup shown just below the element below.

# Innovative Components
In addition to the standard elements detailed below, we also have *innovative* UI components—creative components built by Bov Academy students. You can see the list of the innovative components on [this blog post](https://blog.bovacademy.com/evolution-ui-an-entire-innovative-ui-framework/).

# Standard Elements

Notes (aka Bibliography)

We start with Notes first because it is a crucial part of every article or blog post, and we don’t want you to gloss over it.

Whenever you cite text from another writer, or whenever you refer to some other source, add an HTML sup tag with a number where you quote or refer to the material. The sup tag allows us to add the number as a superscript next to the material you are citing. Then, in the Notes section, you will add the same corresponding number and a link to the original source material. This sounds much more complicated than it is. The following example illustrates:

Put the entire Notes, including the citations, at the bottom of the blog post.

Highlight Text

Sometimes you want to highlight a word or more within a sentence. Use this highlightText button on the Text Editor to insert the HTML to highlight the text you want students to focus on. Highlight only a word or two or just a small portion of a sentence; don’t highlight long sentences or more than one sentence. Also, don’t use this highlight element too often, or else your course content will look like a Christmas tree.

Here is an example of highlighted text:

  In this example, we are highlighting the words highlight me  to bring attention to them.

Expandable Block

First, you rarely, if ever, would need to use the expandable block for typical course content. We have published many courses and not one of them has the expandable block.

Second, use the expandable block in instances where you have content that would be best presented in a tab-view (that is, where clicking on a button or an section title reveals hidden content).

List Group

Use the List Group to display content that is best organized in rows, similar to a single-column table layout.

  

    badge itemList group item1
  
      
  

    List group item2
  
      
  

    List group item3
  
      
  

    List group item4
  
  

Popover

The Modern Developer Style Guide requires you to avoid linking to Wikipedia and similar websites that have the potential to impede rather than illuminate. As an alternative to linking to those external resources, use a Popover to add contextual detail. Also use a Popover to explain or elaborate on a specific word or technology.

Click this underlined  popover  text to show the popover.

Extra-Tip Box

In the Text Editor (accessible next to the Visual Editor), you will see an extraTipBox button. Use that button to add the HTML for the extra-tip box that follows. Use the extra-tip box to add related information that adds clarity, supporting explanation, or evidence. Also, use it to add extra tips relevant to the subject discussed in the paragraph where the extra-tip box is used.

  Add a paragraph along with the extra tip box.

Attention Box

In the Text Editor (accessible next to the Visual Editor), you will see an AttentionBox button. Use that button to add the HTML for this attention box. Use the attention box for the following:

• To reiterate an important point
• To alert the reader to something he or she might have missed and can’t afford to miss
• To warn the reader about a common error or mistake to watch out for
• To add dramatic emphasis.

Pay Close Attention:
 This conspicuous yet lovely blue box is an attention box. You can remove the optional h4 header entitled "Pay Close Attention." 
  

Steps List

Use the following Steps List to give instructions, which require numbered steps, in a lovely styled list:

    

        Step 1 instruction
    
    

        Step 2 instruction
    
    

        Step 3 instruction
    
    

        Step 4 instruction
    


    

FAQ List

Use the following FAQ List to display Frequently Asked Questions (FAQ):

Frequently Asked Questions

  

    
How do i use the commenting feature?
    LoLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officiaaboris
  
  

    
How do i use the commenting feature?
    LoLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nosa qui officialaboris
  


    

Terminologies Block

Use the following Terminologies Block to show important terms with their meanings, whenever you have a list of relevant terms to define:

  

  

    

      
heuristic
      
enabling a person to discover or learn something for themselves. "a “hands-on” or interactive heuristic approach to learning"
      
heuristic
      
enabling a person to discover or learn something for themselves. "a “hands-on” or interactive heuristic approach to learning"
    
  
  

    

      
heuristic
      
enabling a person to discover or learn something for themselves. "a “hands-on” or interactive heuristic approach to learning"
      
heuristic
      
enabling a person to discover or learn something for themselves. "a “hands-on” or interactive heuristic approach to learning"
    
    
  

Inline Quote

Use the inline quote when a blockquote is too much and you want to quote right in a sentence.

    

         Sometimes you don't want a chunky blockquote to quote a bit of text. You may simply want to quote right within a sentence or paragraph, like this This bit of text, in italics, is an inline quote. Notice the inline quote is right within the sentence. It isn't set off like a new paragraph as seen in the blockquote below.
    
    

Before and After

If you ever want to show the before and after states of something, or of an example code, or of some text, use the Before and After labels below.

    

        Before:
        After:
    
    

Exercises

As you have likely read (or will read) in our Course Specification, at the end of each sub-section of a course you will give students exercises; at the end of each section, you will ask them questions and give them a project to build; and at the end of your course, you will show them how to build a real-world application. Write the exercises in the Exercises box shown below, which you can insert by clicking the exercises button on the text editor.

    

      
Exercises
      

        
Example 1
        
Example 2
        
Example 3
      
January 1st, 1970
    
    

Project Assignment

Write projects (given at the end of each section) in the Projects box shown below, which you can insert by clicking the projectAssignment button on the text editor.

    


Project Assignment

Content here


    

Questions

Write questions (given at the end of each section) in the Questions box shown below, which you can insert by clicking the questions button on the text editor.

  

    
Questions
    

       
Question 1
       
Question 2
       
Question 3
     
  
    

Build an Application

Write the details for the end-of-course application in the Applications box shown below, which you can insert by clicking the buildApp button on the text editor.

  

    
Let’s Build an Application

    Content here 
  
    

JavaScript Code

To add the necessary markup to wrap example JavaScript code, click the Wrap_JavaScript button on the text editor (not the Visual Editor, the Text Editor). Add sufficient comments to elaborate on the lines of code that need explanation. To ensure the code is easy to read, format it in your IDE or text editor; then paste it into the text editor here, on Word Press.

// A single-line comment
function myFunction() {
    var x = document.getElementById("demo");
    x.style.fontSize = "25px";
    x.style.color = "red";
}

/*
 Use block the comment when the comment is a full sentence or more, such as
 this one. Write short sentences to ensure each fits within the code block
 and does not require scrolling.
 */
$(".nav.nav-tabs a").click(function (e) {
    e.preventDefault();
    return;
});

  

// A single-line comment
function myFunction() {
    var x = document.getElementById("demo");
    x.style.fontSize = "25px";
    x.style.color = "red";
}

/*
 Use block the comment when the comment is a full sentence or more, such as this one.
 Write short sentences to ensure each fits within the code block and does
 not require scrolling.
 */
$(".nav.nav-tabs a").click(function (e) {
    e.preventDefault();
    return;
});

HTML Example Markup

To add the necessary markup to wrap example HTML, click the Wrap_HTML button on the text editor (not the Visual Editor, the Text Editor).

 This is an a (link) tag.
      

 This is an a (link) tag.

Inline Code

Wrap any piece of code that appears within a sentence or paragraph with the code tag, to highlight that code as code. The code will display in a different style from the rest of words in the sentence or paragraph.

This sentence includes normal words and also this bit of code: console.log("hi");. We can carry on writing a normal sentence or paragraph after we included the inline code.
 

Embedded Image

(With Optional Caption)

Note the following recommendations for embedding images:

• Remember to use the alt tag.
• Image Dimensions: Max width is 1140px. Max height is 760px.
• Images can be jpg or png, whichever format is ideal for the given image. Generally, use a jpg for photos and png for everything else.
• Use images of the highest quality, yet not necessarily of the largest file size. Find the right balance, and give preference to the image quality over file size.

• Result
• HTML

You can insert an optional caption like this one. (Sean Voisen, one of our authors, created this image.)

You can insert an optional caption like this one. (Sean Voisen, one of our authors, created this image.)

Embedded Video

Video Format and Quality
Videos must be mp4 and webm formats. We need both to ensure compatibility and optimization on various old and new browsers.

Use high quality videos.

Video Length and General Video Guidelines
Since we don't advocate full video lectures, use embedded videos mostly to illustrate concepts and actions that are best demonstrated with a video. When to use a video should be apparent and incontrovertible. Use your best judgement.

Video Dimensions
Max width is 1140px.
Max height is 660px.

We are using responsive video, which means you need to upload only one size. The responsive design markup will scale the video accordingly.

Block Quote

Use quotes only if you are indeed quoting text written by someone else. And when you do quote, be sure to cite the original source. See the Notes section above for how to add bibliography to the page.

  This is a blockquote. Unlike the inline quote noted earlier, which shows up right in the sentence, the blockquote shows up as a separate paragraph on its own.

The Headers

  H2 Header 




  H3 Header 




  H4 Header 




  H5 Header 

Ordered list and Unordered list

If any piece of content can be organized into an ordered or unordered list, put it in the list to aid readability.

Ordered list


  

    Ordered list1
  
    
  

    Ordered list1
  
    
  

    Ordered list3
               

      

        Sub Ordered list1
      
                   
      

        Sub Ordered list2
      
                 
    
            
  
    
  
  

    Ordered list3
  
  


Unordered list




  

    Unordered list1
  
    
  

    Unordered list3
                

      

        Sub Unordered list1
      
                   
      

        Sub Unordered list2
      
                  
    
            
  
    
  
  

    Unordered list3
  
  

Pro Tip: You can customize the list type by using and of the options below:
- disc (• • •)
- circle (○ ○ ○)
- square (▪ ▪ ▪)
- decimal (1 2 3)
- decimal-leading-zero (01, 02, 03)
- lower-roman (i ii iii)
- upper-roman (I II III)
- lower-greek (α β γ)
- lower-latin (a b c)
- upper-latin (A B C)
- armenian (Ա Բ Գ)
- georgian (ა ბ გ)
- lower-alpha (a b c)
- upper-alpha (A B C)

Horizontal Line

The ordinary but ubiquitous horizontal line follows; use it to separate sections of content vertically:

Articles in This Series

In case you have to show links to related articles or a series of articles you may use this component. Use class="all-trappings-articles-in-series" at the parent div level.

You may also demarcate the current article in the series by using class="current".

Standout Text

In case you need to make some text standout from the rest.

Table

Use a table only when you have tabular data to display. Tabular data generally refers to data requiring columns and rows.

Math Symbols

If you are familiar with LaTex, you can use it to add math symbols to your course. In fact, you can write an entire post in just LaTex.

\begin{equation} f_k = f(x_k),: x_k = x^*+kh,: k=-\frac{N-1}{2},\dots,\frac{N-1}{2} \end{equation}
where $h$ is some step.
Then we interpolate points ${(x_k,f_k)}$ by polynomial
\begin{equation} \label{eq:poly}P_{N-1}(x)=\sum_{j=0}^{N-1}{a_jx^j}\end{equation}
Its coefficients ${a_j}$ are found as a solution of system of linear equations:
\begin{equation} \label{eq:sys}
\left{ P_{N-1}(x_k) = f_k\right},\quad k=-\frac{N-1}{2},\dots,\frac{N-1}{2}
\end{equation}
Here are references to existing equations: (\ref{eq:poly}) (\ref{eq:sys}).
Here is reference to non-existing equation (\ref{eq:unknown}).

\begin{equation}
\quicklatex{color="#00ff00" size=25}
\boxed{f(x)=\int_1^{\infty}\frac{1}{x^2}\,\mathrm{d}x=1}
\end{equation}

These are the basic example of Math plugin. Enjoy !!