Semantic-UI | Placeholder
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements. A placeholder is used to reserve space for content that soon will appear in a layout.
Below are examples of the different types of placeholders.
Example 1:
<!DOCTYPE html><html> <head> <title>Semantic UI</title> <link href= rel="stylesheet" /> </head> <body> <div class="ui container"> <h2>Placeholder</h2> <div class="ui placeholder"> <div class="image header"> <div class="line"></div> <div class="line"></div> </div> <div class="paragraph"> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </div> </div> <script src= </script> </body></html> |
Output
Example 2:
<!DOCTYPE html><html> <head> <title>Semantic UI</title> <link href= rel="stylesheet" /> </head> <body> <div class="ui container"> <h3>Inline Card Placeholder</h3> <div class="ui four column grid"> <div class="column"> <div class="ui raised segment"> <div class="ui placeholder"> <div class="image header"> <div class="short line"></div> <div class="medium line"></div> </div> <div class="paragraph"> <div class="large line"></div> <div class="medium line"></div> </div> </div> </div> </div> <div class="column"> <div class="ui raised segment"> <div class="ui placeholder"> <div class="image header"> <div class="short line"></div> <div class="medium line"></div> </div> <div class="paragraph"> <div class="large line"></div> <div class="medium line"></div> </div> </div> </div> </div> <div class="column"> <div class="ui raised segment"> <div class="ui placeholder"> <div class="image header"> <div class="short line"></div> <div class="medium line"></div> </div> <div class="paragraph"> <div class="large line"></div> <div class="medium line"></div> </div> </div> </div> </div> <div class="column"> <div class="ui raised segment"> <div class="ui placeholder"> <div class="image header"> <div class="short line"></div> <div class="medium line"></div> </div> <div class="paragraph"> <div class="large line"></div> <div class="medium line"></div> </div> </div> </div> </div> </div> </div> <script src= </script> </body></html> |
Output
Example 3: This is the placeholder for Image.
<!DOCTYPE html><html> <head> <title>Semantic UI</title> <link href= rel="stylesheet" /> </head> <body> <div class="ui container"> <h3>Placeholder for Images</h3> <div style="width: 150px;" class="ui placeholder"> <div class="image"></div> </div> <div style="width: 150px;" class="ui placeholder"> <div class="image"></div> </div> </div> <script src= </script> </body></html> |
Output
Example 4: This is for the inverted Placeholders.
<!DOCTYPE html><html> <head> <title>Semantic UI</title> <link href= rel="stylesheet" /> </head> <body> <div class="ui container"> <h3>Inverted Placeholders</h3> <div class="ui inverted segment"> <div class="ui active inverted placeholder"> <div class="image header"> <div class="line"></div> <div class="line"></div> </div> <div class="paragraph"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </div> </div> <div class="ui inverted segment"> <div class="ui active inverted placeholder"> <div class="image header"> <div class="line"></div> <div class="line"></div> </div> <div class="paragraph"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </div> </div> </div> <script src=</script> </body></html> |
Output
Please Login to comment...