## Ribbons

#### Ribbon Slots

Top Ribbon
Top Ribbon
Top Ribbon
HTML

    <div class="ribbon ribbon--top">
                <div class="ribbon__slot--horizontal_left">Top Ribbon</div>
            </div>
            <br />
            <div class="ribbon ribbon--top">
                <div class="ribbon__slot--horizontal_center">Top Ribbon</div>
            </div>
            <br />
            <div class="ribbon ribbon--top">
                <div class="ribbon__slot--horizontal_right">Top Ribbon</div>
            </div>

#### Ribbon Slots with Dropdown (Ribbon Panel)

Top Ribbon

#### Projects

- Lorem Ipsum
- Lorem Ipsum

#### Studies

- Lorem Ipsum
- Lorem Ipsum

Top Ribbon

#### Projects

- Lorem Ipsum
- Lorem Ipsum

#### Studies

- Lorem Ipsum
- Lorem Ipsum

Top Ribbon

#### Projects

- Lorem Ipsum
- Lorem Ipsum

#### Studies

- Lorem Ipsum
- Lorem Ipsum

HTML

    <div class="ribbon ribbon--top">
                <div class="ribbon__slot--horizontal_left">
                    <details>
                        <summary class="flex justify--center align--center">
                            Top Ribbon
                            <i class="i i_shape_triangle_fill_md_down"></i>
                        </summary>

                        <ul class="ribbon_panel left">
                            <h4 class="ribbon_panel_section_header">Projects</h4>

                            <ul class="ribbon_panel_section">
                                <li class="ribbon_panel_section_item">
                                    <a href="#">Lorem Ipsum</a>
                                </li>
                                <li class="ribbon_panel_section_item">
                                    <a href="#">Lorem Ipsum</a>
                                </li>
                            </ul>

                            <hr class="ribbon_panel_line" />

                            <h4 class="ribbon_panel_section_header">Studies</h4>

                            <ul class="ribbon_panel_section">
                                <li class="ribbon_panel_section_item">
                                    <a href="#">Lorem Ipsum</a>
                                </li>
                                <li class="ribbon_panel_section_item">
                                    <a href="#">Lorem Ipsum</a>
                                </li>
                            </ul>
                        </ul>
                    </details>
                </div>
            </div>
            <br />
            <div class="ribbon ribbon--top">
                <div class="ribbon__slot--horizontal_center">
                    <details>
                        <summary class="flex justify--center align--center">
                            Top Ribbon
                            <i class="i i_shape_triangle_fill_md_down"></i>
                        </summary>

                        <ul class="ribbon_panel center">
                            <h4 class="ribbon_panel_section_header">Projects</h4>

                            <ul class="ribbon_panel_section">
                                <li class="ribbon_panel_section_item">
                                    <a href="#">Lorem Ipsum</a>
                                </li>
                                <li class="ribbon_panel_section_item">
                                    <a href="#">Lorem Ipsum</a>
                                </li>
                            </ul>

                            <hr class="ribbon_panel_line" />

                            <h4 class="ribbon_panel_section_header">Studies</h4>

                            <ul class="ribbon_panel_section">
                                <li class="ribbon_panel_section_item">
                                    <a href="#">Lorem Ipsum</a>
                                </li>
                                <li class="ribbon_panel_section_item">
                                    <a href="#">Lorem Ipsum</a>
                                </li>
                            </ul>
                        </ul>
                    </details>
                </div>
            </div>
            <br />
            <div class="ribbon ribbon--top">
                <div class="ribbon__slot--horizontal_right">
                    <details>
                        <summary class="flex justify--center align--center">
                            Top Ribbon
                            <i class="i i_shape_triangle_fill_md_down"></i>
                        </summary>

                        <ul class="ribbon_panel right">
                            <h4 class="ribbon_panel_section_header">Projects</h4>

                            <ul class="ribbon_panel_section">
                                <li class="ribbon_panel_section_item">
                                    <a href="#">Lorem Ipsum</a>
                                </li>
                                <li class="ribbon_panel_section_item">
                                    <a href="#">Lorem Ipsum</a>
                                </li>
                            </ul>

                            <hr class="ribbon_panel_line" />

                            <h4 class="ribbon_panel_section_header">Studies</h4>

                            <ul class="ribbon_panel_section">
                                <li class="ribbon_panel_section_item">
                                    <a href="#">Lorem Ipsum</a>
                                </li>
                                <li class="ribbon_panel_section_item">
                                    <a href="#">Lorem Ipsum</a>
                                </li>
                            </ul>
                        </ul>
                    </details>
                </div>
            </div>

#### Ribbon Navigation Inline

HTML

    <div class="ribbon ribbon--top">
                <div class="ribbon__slot--horizontal_left">
                    <nav id="ribbon__nav" class="ribbon__nav" role="navigation">
                        <ul id="ribbon__nav__list" class="ribbon__nav__list">
                            <li class="ribbon__nav__list__item">
                                <a href="/" class="ribbon__nav__list__item__text">
                                    Studio
                                </a>
                            </li>
                            <li class="ribbon__nav__list__item">
                                <a href="/" class="ribbon__nav__list__item__text">
                                    Stories
                                </a>
                            </li>
                            <li class="ribbon__nav__list__item">
                                <a href="/" class="ribbon__nav__list__item__text">
                                    Services
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
            <br />
            <div class="ribbon ribbon--top">
                <div class="ribbon__slot--horizontal_center">
                    <nav id="ribbon__nav" class="ribbon__nav" role="navigation">
                        <ul id="ribbon__nav__list" class="ribbon__nav__list">
                            <li class="ribbon__nav__list__item">
                                <a href="/" class="ribbon__nav__list__item__text">
                                    Studio
                                </a>
                            </li>
                            <li class="ribbon__nav__list__item">
                                <a href="/" class="ribbon__nav__list__item__text">
                                    Stories
                                </a>
                            </li>
                            <li class="ribbon__nav__list__item">
                                <a href="/" class="ribbon__nav__list__item__text">
                                    Services
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
            <br />
            <div class="ribbon ribbon--top">
                <div class="ribbon__slot--horizontal_right">
                    <nav id="ribbon__nav" class="ribbon__nav" role="navigation">
                        <ul id="ribbon__nav__list" class="ribbon__nav__list">
                            <li class="ribbon__nav__list__item">
                                <a href="/" class="ribbon__nav__list__item__text">
                                    Studio
                                </a>
                            </li>
                            <li class="ribbon__nav__list__item">
                                <a href="/" class="ribbon__nav__list__item__text">
                                    Stories
                                </a>
                            </li>
                            <li class="ribbon__nav__list__item">
                                <a href="/" class="ribbon__nav__list__item__text">
                                    Services
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>

#### Top Ribbon Menu Inline

HTML

    <div class="ribbon ribbon--top">
                <div class="ribbon__slot--horizontal_left">
                    <menu id="ribbon__menu" class="ribbon__menu" role="menubar">
                        <li class="ribbon__menu__item">
                            <button class="ribbon__button">
                                <a href="">
                                    <i class="i i_symbol_swirl_left_02"></i>
                                </a>
                            </button>
                        </li>
                        <li class="ribbon__menu__item">
                            <button class="ribbon__button">
                                <span class="i">☰</span>
                            </button>
                        </li>
                        <li class="ribbon__menu__item">
                            <button class="ribbon__button">
                                <span class="i">⊞</span>
                            </button>
                        </li>
                        <li class="ribbon__menu__item">
                            <button class="ribbon__button">
                                <span class="i">⌘</span>
                            </button>
                        </li>
                    </menu>
                </div>
            </div>
            <br />
            <div class="ribbon ribbon--top">
                <div class="ribbon__slot--horizontal_center">
                    <menu id="ribbon__menu" class="ribbon__menu" role="menubar">
                        <li class="ribbon__menu__item">
                            <button class="ribbon__button">
                                <a href="">
                                    <i class="i i_symbol_swirl_left_02"></i>
                                </a>
                            </button>
                        </li>
                        <li class="ribbon__menu__item">
                            <button class="ribbon__button">
                                <span class="i">☰</span>
                            </button>
                        </li>
                        <li class="ribbon__menu__item">
                            <button class="ribbon__button">
                                <span class="i">⊞</span>
                            </button>
                        </li>
                        <li class="ribbon__menu__item">
                            <button class="ribbon__button">
                                <span class="i">⌘</span>
                            </button>
                        </li>
                    </menu>
                </div>
            </div>
            <br />
            <div class="ribbon ribbon--top">
                <div class="ribbon__slot--horizontal_right">
                    <menu id="ribbon__menu" class="ribbon__menu" role="menubar">
                        <li class="ribbon__menu__item">
                            <button class="ribbon__button">
                                <a href="">
                                    <i class="i i_symbol_swirl_left_02"></i>
                                </a>
                            </button>
                        </li>
                        <li class="ribbon__menu__item">
                            <button class="ribbon__button">
                                <span class="i">☰</span>
                            </button>
                        </li>
                        <li class="ribbon__menu__item">
                            <button class="ribbon__button">
                                <span class="i">⊞</span>
                            </button>
                        </li>
                        <li class="ribbon__menu__item">
                            <button class="ribbon__button">
                                <span class="i">⌘</span>
                            </button>
                        </li>
                    </menu>
                </div>
            </div>

#### Top Ribbon Slots

HTML

    <div class="ribbon ribbon--top">
                <div class="ribbon__search">
                    <form
                        id="ribbon__search__form"
                        class="ribbon__search__form"
                        role="search"
                    >
                        <button
                            type="submit"
                            id="ribbon__search_button"
                            class="ribbon__search_button"
                        >
                            <i class="i i_ui_search"></i>
                        </button>
                        <input
                            type="text"
                            id="ribbon__search__input"
                            class="ribbon__search__input"
                            placeholder="Search..."
                        />
                    </form>
                </div>
            </div>
            <br />
            <div class="ribbon ribbon--top">
                <div class="ribbon__slot--horizontal_center">
                    <div class="ribbon__search">
                        <form
                            id="ribbon__search__form"
                            class="ribbon__search__form"
                            role="search"
                        >
                            <button
                                type="submit"
                                id="ribbon__search_button"
                                class="ribbon__search_button"
                            >
                                <i class="i i_ui_search"></i>
                            </button>
                            <input
                                type="text"
                                id="ribbon__search__input"
                                class="ribbon__search__input"
                                placeholder="Search..."
                            />
                        </form>
                    </div>
                </div>
            </div>
            <br />
            <div class="ribbon ribbon--top">
                <div class="ribbon__slot--horizontal_right">
                    <div class="ribbon__search">
                        <form
                            id="ribbon__search__form"
                            class="ribbon__search__form"
                            role="search"
                        >
                            <button
                                type="submit"
                                id="ribbon__search_button"
                                class="ribbon__search_button"
                            >
                                <i class="i i_ui_search"></i>
                            </button>
                            <input
                                type="text"
                                id="ribbon__search__input"
                                class="ribbon__search__input"
                                placeholder="Search..."
                            />
                        </form>
                    </div>
                </div>
            </div>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!