# Mascots

Mascots are SVG images that can be used in the [Topic box](https://sphinx-theme.scylladb.com/master/examples/topic-box.md) and [Hero box](https://sphinx-theme.scylladb.com/master/examples/hero-box.md) components.
The images are available in the `_static` folder of the project, under the `img/mascots-2` directory.

## Preview


            <div class="topics-grid topics-grid--products">
                
                <div class="grid-container full">
                    <div class="grid-x grid-margin-x">
            
            
                <div class="cell topic-box topic-box--product large-3 small-6">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots-2/2-monster-laptop.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">2-monster-laptop</h3>
                </div>
                <div class="topic-box_\_body">
            
            
            </div>
            </a></div>
            
            
                <div class="cell topic-box topic-box--product large-3 small-6">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots-2/alternator.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">alternator</h3>
                </div>
                <div class="topic-box_\_body">
            
            
            </div>
            </a></div>
            
            
                <div class="cell topic-box topic-box--product large-3 small-6">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots-2/award.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">award</h3>
                </div>
                <div class="topic-box_\_body">
            
            
            </div>
            </a></div>
            
            
                <div class="cell topic-box topic-box--product large-3 small-6">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots-2/care-pet.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">care-pet</h3>
                </div>
                <div class="topic-box_\_body">
            
            
            </div>
            </a></div>
            
            
                <div class="cell topic-box topic-box--product large-3 small-6">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots-2/cdc.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">cdc</h3>
                </div>
                <div class="topic-box_\_body">
            
            
            </div>
            </a></div>
            
            
                <div class="cell topic-box topic-box--product large-3 small-6">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots-2/chef.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">chef</h3>
                </div>
                <div class="topic-box_\_body">
            
            
            </div>
            </a></div>
            
            
                <div class="cell topic-box topic-box--product large-3 small-6">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots-2/cloud.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">cloud</h3>
                </div>
                <div class="topic-box_\_body">
            
            
            </div>
            </a></div>
            
            
                <div class="cell topic-box topic-box--product large-3 small-6">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots-2/default.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">default</h3>
                </div>
                <div class="topic-box_\_body">
            
            
            </div>
            </a></div>
            
            
                <div class="cell topic-box topic-box--product large-3 small-6">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots-2/docs.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">docs</h3>
                </div>
                <div class="topic-box_\_body">
            
            
            </div>
            </a></div>
            
            
                <div class="cell topic-box topic-box--product large-3 small-6">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots-2/driver.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">driver</h3>
                </div>
                <div class="topic-box_\_body">
            
            
            </div>
            </a></div>
            
            
                <div class="cell topic-box topic-box--product large-3 small-6">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots-2/forward.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">forward</h3>
                </div>
                <div class="topic-box_\_body">
            
            
            </div>
            </a></div>
            
            
                <div class="cell topic-box topic-box--product large-3 small-6">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots-2/forward-2.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">forward-2</h3>
                </div>
                <div class="topic-box_\_body">
            
            
            </div>
            </a></div>
            
            
                <div class="cell topic-box topic-box--product large-3 small-6">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots-2/headphones.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">headphones</h3>
                </div>
                <div class="topic-box_\_body">
            
            
            </div>
            </a></div>
            
            
                <div class="cell topic-box topic-box--product large-3 small-6">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots-2/heart.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">heart</h3>
                </div>
                <div class="topic-box_\_body">
            
            
            </div>
            </a></div>
            
            
                <div class="cell topic-box topic-box--product large-3 small-6">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots-2/laptop.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">laptop</h3>
                </div>
                <div class="topic-box_\_body">
            
            
            </div>
            </a></div>
            
            
                <div class="cell topic-box topic-box--product large-3 small-6">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots-2/magnifying-glass.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">magnifying-glass</h3>
                </div>
                <div class="topic-box_\_body">
            
            
            </div>
            </a></div>
            
            
                <div class="cell topic-box topic-box--product large-3 small-6">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots-2/manager.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">manager</h3>
                </div>
                <div class="topic-box_\_body">
            
            
            </div>
            </a></div>
            
            
                <div class="cell topic-box topic-box--product large-3 small-6">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots-2/monitor.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">monitor</h3>
                </div>
                <div class="topic-box_\_body">
            
            
            </div>
            </a></div>
            
            
                <div class="cell topic-box topic-box--product large-3 small-6">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots-2/open-mouth.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">open-mouth</h3>
                </div>
                <div class="topic-box_\_body">
            
            
            </div>
            </a></div>
            
            
                <div class="cell topic-box topic-box--product large-3 small-6">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots-2/operator.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">operator</h3>
                </div>
                <div class="topic-box_\_body">
            
            
            </div>
            </a></div>
            
            
                <div class="cell topic-box topic-box--product large-3 small-6">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots-2/plug.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">plug</h3>
                </div>
                <div class="topic-box_\_body">
            
            
            </div>
            </a></div>
            
            
                <div class="cell topic-box topic-box--product large-3 small-6">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots-2/repair.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">repair</h3>
                </div>
                <div class="topic-box_\_body">
            
            
            </div>
            </a></div>
            
            
                <div class="cell topic-box topic-box--product large-3 small-6">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots-2/server.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">server</h3>
                </div>
                <div class="topic-box_\_body">
            
            
            </div>
            </a></div>
            
            
                <div class="cell topic-box topic-box--product large-3 small-6">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots-2/sleepy.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">sleepy</h3>
                </div>
                <div class="topic-box_\_body">
            
            
            </div>
            </a></div>
            
            
                <div class="cell topic-box topic-box--product large-3 small-6">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots-2/smile-learning.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">smile-learning</h3>
                </div>
                <div class="topic-box_\_body">
            
            
            </div>
            </a></div>
            
            
                <div class="cell topic-box topic-box--product large-3 small-6">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots-2/stretched-up.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">stretched-up</h3>
                </div>
                <div class="topic-box_\_body">
            
            
            </div>
            </a></div>
            
            
                <div class="cell topic-box topic-box--product large-3 small-6">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots-2/toolbox.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">toolbox</h3>
                </div>
                <div class="topic-box_\_body">
            
            
            </div>
            </a></div>
            
            
                <div class="cell topic-box topic-box--product large-3 small-6">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots-2/university.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">university</h3>
                </div>
                <div class="topic-box_\_body">
            
            
            </div>
            </a></div>
            </div></div></div>

## Reference

Available mascot images:

- `/_static/img/mascots-2/2-monster-laptop.svg`
- `/_static/img/mascots-2/alternator.svg`
- `/_static/img/mascots-2/award.svg`
- `/_static/img/mascots-2/care-pet.svg`
- `/_static/img/mascots-2/cdc.svg`
- `/_static/img/mascots-2/chef.svg`
- `/_static/img/mascots-2/cloud.svg`
- `/_static/img/mascots-2/default.svg`
- `/_static/img/mascots-2/docs.svg`
- `/_static/img/mascots-2/driver.svg`
- `/_static/img/mascots-2/forward.svg`
- `/_static/img/mascots-2/forward-2.svg`
- `/_static/img/mascots-2/headphones.svg`
- `/_static/img/mascots-2/heart.svg`
- `/_static/img/mascots-2/laptop.svg`
- `/_static/img/mascots-2/magnifying-glass.svg`
- `/_static/img/mascots-2/manager.svg`
- `/_static/img/mascots-2/monitor.svg`
- `/_static/img/mascots-2/open-mouth.svg`
- `/_static/img/mascots-2/operator.svg`
- `/_static/img/mascots-2/plug.svg`
- `/_static/img/mascots-2/repair.svg`
- `/_static/img/mascots-2/server.svg`
- `/_static/img/mascots-2/sleepy.svg`
- `/_static/img/mascots-2/smile-learning.svg`
- `/_static/img/mascots-2/stretched-up.svg`
- `/_static/img/mascots-2/toolbox.svg`
- `/_static/img/mascots-2/university.svg`