Helpers

v-0.0.0

Variants

Info

Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut erat nec lacus iaculis ornare. Cras orci ante, interdum id risus eget, lobortis congue lectus. In hac habitasse platea dictumst.

<div class="helper--info">
    <p class="helper__title">Titre</p>
    <div class="helper__content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Nam ut erat nec lacus iaculis ornare.
        Cras orci ante, interdum id risus eget,
        lobortis congue lectus. In hac habitasse platea dictumst.
    </div>
</div>

Tip

Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut erat nec lacus iaculis ornare. Cras orci ante, interdum id risus eget, lobortis congue lectus. In hac habitasse platea dictumst.

<div class="helper--tip">
    <p class="helper__title">Titre</p>
    <div class="helper__content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Nam ut erat nec lacus iaculis ornare.
        Cras orci ante, interdum id risus eget,
        lobortis congue lectus. In hac habitasse platea dictumst.
    </div>
</div>

Warning

Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut erat nec lacus iaculis ornare. Cras orci ante, interdum id risus eget, lobortis congue lectus. In hac habitasse platea dictumst.

<div class="helper--warning">
    <p class="helper__title">Titre</p>
    <div class="helper__content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Nam ut erat nec lacus iaculis ornare.
        Cras orci ante, interdum id risus eget,
        lobortis congue lectus. In hac habitasse platea dictumst.
    </div>
</div>

Use case

Do

• Use helpers for content you want to stand out.
• Use helpers sparingly, only one per page if possible.
• Group in one bloc all the informations in a list inside one helper.

Don't

• Use helpers linked to a form input.
• Use multiple helpers next to each other.
• Use helpers for a feedback of a user's action.