Help Box

Contents

We have two inline contextual help components .help-box and .help-box-sm. With both options we’ve created 6 default styles that are baked in. If you want to use a different image than one of the 6 defaults, you can always override it with custom CSS.

.help-box

Chat

Looking for more?

Some additional content here. It can even wrap to a new line if need be.

<div class="help-box help-box-chat o-flexy o-flexy--middle">
    <img src="https://secure.helpscout.net/images/help-box/help-box-lrg/help-box-icons-lrg-04.svg" class="o-flexy__item help-box__img">
    <div class="help-box__content o-flexy__block">
        <strong>Looking for more?</strong>
        <p>Some additional content here. It can even wrap to a new line if need be.</p>
    </div>
</div>

Dev

Looking for more?

Some additional content here. It can even wrap to a new line if need be.

<div class="help-box help-box-dev o-flexy o-flexy--middle">
    <img src="https://secure.helpscout.net/images/help-box/help-box-lrg/help-box-icons-lrg-01.svg" class="o-flexy__item help-box__img">
    <div class="help-box__content o-flexy__block">
        <strong>Looking for more?</strong>
        <p>Some additional content here. It can even wrap to a new line if need be.</p>
    </div>
</div>

Explore

Looking for more?

Some additional content here. It can even wrap to a new line if need be.

<div class="help-box help-box-explore o-flexy o-flexy--middle">
    <img src="https://secure.helpscout.net/images/help-box/help-box-lrg/help-box-icons-lrg-02.svg" class="o-flexy__item help-box__img">
    <div class="help-box__content o-flexy__block">
        <strong>Looking for more?</strong>
        <p>Some additional content here. It can even wrap to a new line if need be.</p>
    </div>
</div>

Lightbulb

Looking for more?

Some additional content here. It can even wrap to a new line if need be.

<div class="help-box help-box-lightbulb o-flexy o-flexy--middle">
    <img src="https://secure.helpscout.net/images/help-box/help-box-lrg/help-box-icons-lrg-06.svg" class="o-flexy__item help-box__img">
    <div class="help-box__content o-flexy__block">
        <strong>Looking for more?</strong>
        <p>Some additional content here. It can even wrap to a new line if need be.</p>
    </div>
</div>
<div class="help-box help-box-search o-flexy o-flexy--middle">
    <img src="https://secure.helpscout.net/images/help-box/help-box-lrg/help-box-icons-lrg-03.svg" class="o-flexy__item help-box__img">
    <div class="help-box__content o-flexy__block">
        <strong>Looking for more?</strong>
        <p>Some additional content here. It can even wrap to a new line if need be.</p>
    </div>
</div>

Video

Looking for more?

Some additional content here. It can even wrap to a new line if need be.

<div class="help-box help-box-video o-flexy o-flexy--middle">
    <img src="https://secure.helpscout.net/images/help-box/help-box-lrg/help-box-icons-lrg-05.svg" class="o-flexy__item help-box__img">
    <div class="help-box__content o-flexy__block">
        <strong>Looking for more?</strong>
        <p>Some additional content here. It can even wrap to a new line if need be.</p>
    </div>
</div>

.help-box-sm

Chat

Learn more about the developer API

<div class="help-box-sm help-box-chat o-flexy o-flexy--middle">
    <img src="https://secure.helpscout.net/images/help-box/help-box-sm/help-box-icons-sm-04.svg" class="o-flexy__item help-box__img">
    <div class="help-box-sm__content o-flexy__block">
        <p>Learn more about the <a href="#">developer API</a></p>
    </div>
</div>

Dev

Learn more about the developer API

<div class="help-box-sm help-box-dev o-flexy o-flexy--middle">
    <img src="https://secure.helpscout.net/images/help-box/help-box-sm/help-box-icons-sm-01.svg" class="o-flexy__item help-box__img">
    <div class="help-box-sm__content o-flexy__block">
        <p>Learn more about the <a href="#">developer API</a></p>
    </div>
</div>

Explore

Learn more about the developer API

<div class="help-box-sm help-box-explore o-flexy o-flexy--middle">
    <img src="https://secure.helpscout.net/images/help-box/help-box-sm/help-box-icons-sm-02.svg" class="o-flexy__item help-box__img">
    <div class="help-box-sm__content o-flexy__block">
        <p>Learn more about the <a href="#">developer API</a></p>
    </div>
</div>

Lightbulb

Learn more about the developer API

<div class="help-box-sm help-box-lightbulb o-flexy o-flexy--middle">
    <img src="https://secure.helpscout.net/images/help-box/help-box-sm/help-box-icons-sm-06.svg" class="o-flexy__item help-box__img">
    <div class="help-box-sm__content o-flexy__block">
        <p>Learn more about the <a href="#">developer API</a></p>
    </div>
</div>

Search

<div class="help-box-sm help-box-search o-flexy o-flexy--middle">
    <img src="https://secure.helpscout.net/images/help-box/help-box-sm/help-box-icons-sm-03.svg" class="o-flexy__item help-box__img">
    <div class="help-box-sm__content o-flexy__block">
        <p>Learn more about the <a href="#">developer API</a></p>
    </div>
</div>

Video

Learn more about the developer API

<div class="help-box-sm help-box-video o-flexy o-flexy--middle">
    <img src="https://secure.helpscout.net/images/help-box/help-box-sm/help-box-icons-sm-05.svg" class="o-flexy__item help-box__img">
    <div class="help-box-sm__content o-flexy__block">
        <p>Learn more about the <a href="#">developer API</a></p>
    </div>
</div>