Foundation CSS Prototyping Utilities Text Helpers
Last Updated :
09 Mar, 2022
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 Utilities Text Helpers Classes in Foundation CSS.
In Foundation CSS, Prototyping Utilities Text Helpers are used to play around with text and change the text transformation, text-decoration, and Image replacement behavior.
Foundation CSS Prototyping Utilities Text Helpers classes:
- text-hide: This class can be used to hide the element’s text within the context of the given image.
- text-uppercase: This class can be used to transform the text to the uppercase.
- text-lowercase: This class can be used to transform the text to the lowercase.
- text-capitalize: This class can be used to transform the text first character of every word to the uppercase and leave other letters unaffected.
- text-underline: This class can be used to decorate the text to have an underline throughout.
- text-overline: This class can be used to decorate the text to have overline throughout.
- text-line-through: This class can be used to decorate the text to have lines across the text throughout.
Syntax:
<div class="text-helper-class">
........
</div>
Example 1: Below is the example that illustrates the use of Text helpers using .text-hide class.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Prototyping Utilities Text Helpers classes</title>
<link rel="stylesheet"
href=
crossorigin="anonymous">
<script src=
crossorigin="anonymous"></script>
<link rel="stylesheet"
href=
crossorigin="anonymous">
<link rel="stylesheet"
href=
crossorigin="anonymous">
<link rel="stylesheet"
href=
crossorigin="anonymous">
</head>
<body style="margin: 10rem;">
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>Foundation CSS Text Helpers</h3>
<a target="_blank"
class="text-hide">
<img src=
alt="gfg logo">Some SEO text here
</a>
</center>
</body>
</html>
|
Output:
Foundation CSS Prototyping Utilities Text Helpers
Example 2: Below is the example that illustrates the use of Text helpers using text-uppercase, text-lowercase, and text-capitalize classes.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Prototyping Utilities Text Helpers classes</title>
<link rel="stylesheet"
href=
crossorigin="anonymous"/>
<script src=
crossorigin="anonymous">
</script>
<link rel="stylesheet"
href=
crossorigin="anonymous"/>
<link rel="stylesheet"
href=
crossorigin="anonymous"/>
<link rel="stylesheet"
href=
crossorigin="anonymous"/>
</head>
<body style="margin: 10rem">
<center>
<h2 style="color: green">GeeksforGeeks</h2>
<h3>Foundation CSS Text Helpers</h3>
<p class="text-uppercase">GeeksforGeeks</p>
<p class="text-lowercase">GEEKSFORGEEKS</p>
<p class="text-capitalize">geeksforgeeks</p>
</center>
</body>
</html>
|
Output:
Foundation CSS Prototyping Utilities Text Helpers
Example 3: Below is the example that illustrates the use of Text helpers using .text-underline, .text-overline, and .text-line-through classes.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Prototyping Utilities Text Helpers classes</title>
<link rel="stylesheet"
href=
crossorigin="anonymous"/>
<script src=
crossorigin="anonymous">
</script>
<link rel="stylesheet"
href=
crossorigin="anonymous"/>
<link rel="stylesheet"
href=
crossorigin="anonymous"/>
<link rel="stylesheet"
href=
crossorigin="anonymous"/>
</head>
<body style="margin: 10rem">
<center>
<h2 style="color: green">GeeksforGeeks</h2>
<h3>Foundation CSS Text Helpers</h3>
<p class="text-underline">GeeksforGeeks</p>
<p class="text-overline">GeeksforGeeks</p>
<p class="text-line-through">GeeksforGeeks</p>
</center>
</body>
</html>
|
Output:
Foundation CSS Prototyping Utilities Text Helpers
Reference link: https://get.foundation/sites/docs/prototyping-utilities.html#text-helpers
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...