Foundation CSS Prototyping Utilities Separator

Last Updated : 22 Mar, 2022

Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on SaaS-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.

The Prototyping Utilities Separator helps to create the line gap ie., the tiny separator below the heading of an element & is generally used inside the head section.

Foundation CSS Prototyping Utilities Separator Class:

separator-*: This class is used to align the heading to the specific position and create a tiny bar below it.

The star(*) mark can be replaced by the specific positions ie., left, right & center.

Syntax:

<h3 class="separator-class"> Content </h3>

Example 1: This example describes the Prototyping Utilities Separator in Foundation CSS.

HTML

<html> 
  
<head> 
    <link crossorigin="anonymous" rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> 
    <link rel="stylesheet" href= 
"https://get.foundation/sites/docs/assets/css/docs.css"> 
</head> 
  
<body> 
    <h3 style="color:green">GeeksforGeeks</h3> 
    <h5>Foundation CSS Prototyping Utilities Separator</h5> 
    <br> 
    <h3 class="separator-left">Geeks</h3> 
    <h3 class="separator-center">for</h3> 
    <h3 class="separator-right">Geeks</h3>  
</body> 
  
</html>

Output:

Example 2: In this example; we are using separator utility classes with an image, paragraph, and heading tags.

HTML

<html> 
  
<head> 
    <link crossorigin="anonymous" rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> 
    <link rel="stylesheet" href= 
"https://get.foundation/sites/docs/assets/css/docs.css"> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <h3>  
          Foundation CSS Prototyping Utilities Separator 
     </h3> 
    <br> 
    <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/titleShadow-1024x341.png"
         class="separator-left" 
         height="160px" 
         width="160px"
         alt="img"> 
    <h4 class="separator-left"> 
        GeeksforGeeks C++ Course 
    </h4> 
    <p class="separator-center"> 
        I am a Paragraph 
    </p> 
  
    <h3 class="separator-right"> 
        I am a Right aligned Heading 
    </h3>  
</body> 
</html>