Skip to content
Related Articles

Related Articles

Improve Article

Semantic-UI | Placeholder

  • Last Updated : 11 May, 2020

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :