Foundation CSS Prototyping Arrow Utility

Last Updated : 29 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 Arrow Utility is a visual representation or icon that helps to navigate to different pages in a website. It is generally used as the dropdown arrow for navigation.

Foundation CSS Prototyping Arrow Utility Class:

arrow-*: This class can be used to point to specific directions.

The star(*) mark can be replaced by specifying the direction ie., down, right, up & left.

Used Classes:

arrow-right: To display a right navigation arrow
arrow-left: To display a left navigation arrow
arrow-up:To display a navigation arrow pointing upwards
arrow-down: To display a navigation arrow pointing downwards

Example 1: In this example, we will learn about Up and Down Arrow Utilities in Foundation CSS.

HTML

<!DOCTYPE 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> Up and Down Arrow Utility </h3> 
      
    <div class="arrow-up" 
        style="border-width:2.4375em"> 
    </div> 
    <br> 
      
    <div class="arrow-down" 
        style="border-width:2.4375em"> 
    </div> 
</body> 
  
</html> 

Output:

Example 2: In this example, we will learn about right and left arrow utility and also provide some styling to them

HTML

<!DOCTYPE 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> Right and Left Coloured Arrow Utility</h3> 
      
    <div class="arrow-right" 
        style="border-color:pink transparent  transparent;  
               border-width:2.4375em;border-right-width:0;"> 
    </div> 
    <br> 
  
    <div class="arrow-left" 
        style="border-color:blue transparent transparent; 
               border-width:2.4375em;border-left-width:0;"> 
    </div> 
</body> 
  
</html> 