Skip to content
Related Articles

Related Articles

Foundation CSS Kitchen Sink Reveal

Improve Article
Save Article
  • Last Updated : 28 Feb, 2022
Improve Article
Save Article

Foundation CSS is the frontend framework of CSS that is used to build responsive websites, apps, and emails that work perfectly on any device. It is written using HTML, CSS, and JavaScript and is used by many famous companies like Amazon, Facebook, eBay, etc. It uses packages like Grunt and Libsass for fast coding and controlling and Saas compiler to make development faster.  

Kitchen Sink Reveal is used to show the content in a pop-up window when the link is clicked. When we want to hide the content and again show it then we can use this reveal class in Foundation CSS.

Foundation CSS Kitchen Sink Reveal class: 

  • reveal: It is used to create the pop-up window.

Syntax:

<p><a data-open="revealText">....</a></p>
<div class="reveal" id="revealText" data-reveal>
  ....
</div>

Example 1:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
      <title>Foundation CSS Kitchen Sink Reveal</title>
      <link rel="stylesheet" 
            href=
            crossorigin="anonymous">
      <script src=
              crossorigin="anonymous">
      </script>
      <link rel="stylesheet"
            href=
      <script src=
     </script>
      <script src=
              crossorigin="anonymous">
     </script>
</head>
  
<body>
  <center>
  
    <h1 style="color:green;">
      GeeksforGeeks
    </h1>
    <h3>Foundation CSS Kitchen Sink Reveal</h3>
  
    <p><a data-open="revealExample">Click Here</a></p>
  
  
    <div class="reveal"
         id="revealExample"
         data-reveal>
      <h1>GeeksforGeeks</h1>
      <p class="lead">
         A Computer Science portal for geeks. 
         It contains well written, well thought 
         and well explained
         computer science and programming articles</p>
  
      <p>
        A Computer Science portal for geeks. 
        It contains well written, well thought 
        and well explained computer science
        and programming articles</p>
  
    </div>
  </center>
  <script>
    $(document).ready(function () {
      $(document).foundation();
    })
  </script>
  
</body>
</html>


Output:

Foundation CSS Kitchen Sink Reveal

Foundation CSS Kitchen Sink Reveal

Example 2:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
      <title>Foundation CSS Kitchen Sink Reveal</title>
      <link rel="stylesheet" 
            href=
            crossorigin="anonymous">
      <script src=
              crossorigin="anonymous">
      </script>
      <link rel="stylesheet"
            href=
      <script src=
     </script>
      <script src=
              crossorigin="anonymous">
     </script>
  
</head>
  
<body>
  <center>
  
    <h1 style="color:green;">
      GeeksforGeeks
    </h1>
    <h3>Foundation CSS Kitchen Sink Reveal</h3>
  
    <p><a data-open="revealExample">Click me</a></p>
  
  
    <div class="reveal" id="revealExample" data-reveal>
      <h1>GeeksforGeeks</h1> <br>
      <img src=
         alt="GFG image">
      <strong>GeeksforGeeks Image</strong> <br> <br>
  
      <input type="text" name="" id="" placeholder="Enter your name">
      <button class="primary button">Submit</button>
  
      <button class="close-button" data-close aria-label="Close reveal" 
              type="button">
        <span aria-hidden="true">×</span>
      </button>
    </div>
  </center>
  
  <script>
      $(document).ready(function () {
            $(document).foundation();
      })
  </script>
</body>
</html>


Output:

Foundation CSS Kitchen Sink Reveal

Foundation CSS Kitchen Sink Reveal

Reference link: https://get.foundation/sites/docs/kitchen-sink.html#reveal


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!