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/[email protected]/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/[email protected]/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>
Output:
References: https://get.foundation/sites/docs/prototyping-utilities.html#separator
Similar Reads
Foundation CSS Prototyping Utilities Foundation CSS is an open-source and responsive front-end framework built by the ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. The Prototyping Utilities facilitate the building o
3 min read
Foundation CSS Prototyping Utilities Sizing Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. In this article, we will discuss the Prototyping Utilit
2 min read
Foundation CSS Prototyping Utilities Sass Reference 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,
4 min read
Foundation CSS Prototyping Utilities List Styling A Foundation is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framework is
4 min read
Foundation CSS Prototyping Utilities Text Helpers Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. In this article, we will discuss the Prototyping Utilit
3 min read