Components - Bojler

Buttons

We have implemented bulletproof buttons that work properly on all email clients.

We’ve prepared few button variations for you. To apply the variation just add one of the following classes next to your .button class:

Class	Description
`.button--full-width`	100% width button.
`.button--rounded`	Button with rounded corners.

Where to customize this?

To change default button settings you have to update variables in src/sass/_settings.scss. Take a look at table below.

Variable Name	Description	Value
`$button-default-background-color`	Defines default background color on buttons.	`$color-black`
`$button-default-text-color`	Defines default text color on buttons.	`$color-white`

Example — Default

<table class="button" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <a href="#">Click me!</a>
        </td>
    </tr>
</table>

Example — Full Width

<table class="button button--full-width" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <a href="#">Click me!</a>
        </td>
    </tr>
</table>

Example — Rounded Corners

<table class="button button--rounded" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <a href="#">Click me!</a>
        </td>
    </tr>
</table>

Hero

Hero is component with background image and content inside it. With this component we’re trying to recreate widely popular hero sections seen all around web.

Everything regarding CSS and reset for this component is already implemented inside boilerplate.html and boilerplate-with-hero.html templates. Markup can be found in boilerplate-with-hero.html or you can copy it from example below.

Example

<table class="container" width="660" align="center" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td class="hero" width="660" height="350" background="https://dummyimage.com/600x350/d9f0ff/cccccc.jpg">
            <!--[if gte mso 9]>
            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 660px; height: 350px;">
            <v:fill type="frame" src="https://dummyimage.com/660x350/d9f0ff/cccccc.jpg" color="#ffffff" />
            <v:textbox inset="0, 0, 0, 0">
            <![endif]-->
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td class="hero__inner">
                        <table width="580" align="center" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td class="text-center">
                                    <h1>Title</h1>
                                </td>
                            </tr>
                            <tr>
                                <td class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
                            </tr>
                            <tr>
                                <td>
                                    <table class="button mx-auto" border="0" cellpadding="0" cellspacing="0" align="center">
                                        <tr>
                                            <td>
                                                <a href="#">Click me!</a>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            <!--[if gte mso 9]>
            </v:textbox>
            </v:rect>
            <![endif]-->
        </td>
    </tr>
</table>