Semantic-UI Content Headers Type

Semantic UI is an open-source framework that has some predefined classes to make our website look beautiful and responsive. It is similar to bootstrap as it has pre-defined classes for use. It used CSS and jQuery to build the interface. It has some different types of elements that help us to create a beautiful website. 

Semantic UI Headers are used to provide a short summary of the content. We can use these headers with text, icons, etc. Semantic UI Content Headers are used to give importance to the sections. There are many headers type such as huge, large, medium, small, tiny, etc. 

In this article, we will discuss Content Headers Type in Semantic-UI.

Semantic UI Content Headers Type Classes:

• huge: This class is used to create the huge size header.
• large: This class is used to create the large size header.
• medium: This class is used to create medium size header.
• small: This class is used to create a small size header.
• tiny: This class is used to create the tiny size header.

Syntax:

<div class="ui Content-Headers-Type-Class header">
  ....
</div>

Example 1: The following code demonstrates the Semantic UI Content Headers Type using huge and large classes.

Output:

Example 2: The following code demonstrates the Semantic UI Content Headers Type using the medium, small, and tiny classes.

Output:

Reference: https://semantic-ui.com/elements/header.html#content-headers