Primer CSS Layout Visibility

Last Updated : 19 Apr, 2022

Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible.

The layout is used to display the content using particular style. For example – we can change the layout of document by using display, float, alignment, and other utilities.

Primer CSS Visibility Layout is used to adjust the visibility of an element using .v-hidden and .v-visible classes.

Used Classes:

.v-hidden – This class is used to set the visibility to hidden of an element.
.v-visible – This class is used to set the visibility to visible of an element.

Syntax:

<div class="v-*> Content... </div>

Example 1:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Primer CSS Layout Visibility</title> 
  
    <link href= 
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
        rel="stylesheet" /> 
</head> 
  
<body> 
    <div class="text-center"> 
        <h1 class="color-fg-open"> 
            GeeksforGeeks 
        </h1> 
  
        <h3>Primer CSS Layout Visibility</h3> 
  
        <h3>Visibility Hidden</h3> 
        <div class="v-hidden"> 
            GeeksforGeeks Hidden 
        </div> 
  
        <h3>Visibility Visible</h3> 
        <div class="v-visible"> 
            GeeksforGeeks Visible 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Example 2:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Primer CSS Layout Visibility</title> 
  
    <link href= 
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" 
        rel="stylesheet" /> 
</head> 
  
<body> 
    <h1 class="color-fg-open"> 
        GeeksforGeeks 
    </h1> 
  
    <h3>Primer CSS Layout Visibility</h3> 
  
    <h3>Visibility Hidden</h3> 
    <div class="d-table v-hidden"> 
        <div class="d-table-cell color-bg-success-emphasis"> 
            Display Table Cell 
        </div> 
        <div class="d-table-cell color-bg-accent-emphasis"> 
            Display Table Cell 
        </div> 
        <div class="d-table-cell color-bg-success-emphasis"> 
            Display Table Cell 
        </div> 
    </div> 
  
    <h3>Visibility Visible</h3> 
    <div class="d-table v-visible"> 
        <div class="d-table-cell color-bg-success-emphasis"> 
            Display Table Cell 
        </div> 
        <div class="d-table-cell color-bg-accent-emphasis"> 
            Display Table Cell 
        </div> 
        <div class="d-table-cell color-bg-success-emphasis"> 
            Display Table Cell 
        </div> 
    </div> 
</body> 
  
</html>