Block

Os block's são utilizados para agrupar informações em uma forma de painel.

Adiciona as informações aqui

                    
                        <div class="c-block--arky">
                            <div class="c-block__header">
                                <label class="c-block__title">Block - Arky</label>
                            </div>
                            <section class="c-block__body">
                                <p>Adiciona as informações aqui</p>
                            </section>
                        </div>
                        <div class="c-block--der">
                            <div class="c-block__header">
                                <label class="c-block__title">Block - Der</label>
                            </div>
                            <section class="c-block__body">
                                <p>Adiciona as informações aqui</p>
                            </section>
                        </div>
                        <div class="c-block--gary">
                            <div class="c-block__header">
                                <label class="c-block__title">Block - Gary</label>
                            </div>
                            <section class="c-block__body">
                                <p>Adiciona as informações aqui</p>
                            </section>
                        </div>
                        <div class="c-block--kal">
                            <div class="c-block__header">
                                <label class="c-block__title">Block - Kal</label>
                            </div>
                            <section class="c-block__body">
                                <p>Adiciona as informações aqui</p>
                            </section>
                        </div>
                        <div class="c-block--lile">
                            <div class="c-block__header">
                                <label class="c-block__title">Block - Lile</label>
                            </div>
                            <section class="c-block__body">
                                <p>Adiciona as informações aqui</p>
                            </section>
                        </div>
                        <div class="c-block--low">
                            <div class="c-block__header">
                                <label class="c-block__title">Block - Low</label>
                            </div>
                            <section class="c-block__body">
                                <p>Adiciona as informações aqui</p>
                            </section>
                        </div>
                        <div class="c-block--lube">
                            <div class="c-block__header">
                                <label class="c-block__title">Block - Lube</label>
                            </div>
                            <section class="c-block__body">
                                <p>Adiciona as informações aqui</p>
                            </section>
                        </div>
                        <div class="c-block--neli">
                            <div class="c-block__header">
                                <label class="c-block__title">Block - Neli</label>
                            </div>
                            <section class="c-block__body">
                                <p>Adiciona as informações aqui</p>
                            </section>
                        </div>
                        <div class="c-block--pin">
                            <div class="c-block__header">
                                <label class="c-block__title">Block - Pin</label>
                            </div>
                            <section class="c-block__body">
                                <p>Adiciona as informações aqui</p>
                            </section>
                        </div>
                        <div class="c-block--range">
                            <div class="c-block__header">
                                <label class="c-block__title">Block - Range</label>
                            </div>
                            <section class="c-block__body">
                                <p>Adiciona as informações aqui</p>
                            </section>
                        </div>
                        <div class="c-block--ren">
                            <div class="c-block__header">
                                <label class="c-block__title">Block - Ren</label>
                            </div>
                            <section class="c-block__body">
                                <p>Adiciona as informações aqui</p>
                            </section>
                        </div>
                        <div class="c-block--rup">
                            <div class="c-block__header">
                                <label class="c-block__title">Block - Rup</label>
                            </div>
                            <section class="c-block__body">
                                <p>Adiciona as informações aqui</p>
                            </section>
                        </div>
                        <div class="c-block--tie">
                            <div class="c-block__header">
                                <label class="c-block__title">Block - Tie</label>
                            </div>
                            <section class="c-block__body">
                                <p>Adiciona as informações aqui</p>
                            </section>
                        </div>

Adicionando padding no body

Por padrão o body do block vem sem espaçamentos, mas podemos resolver o problema adicionando a classe c-block__body--padding no body.

Adiciona as informações aqui

                    
                        <div class="c-block--gary">
                            <div class="c-block__header">
                                <label class="c-block__title">Block - Com espaçamentos no body</label>
                            </div>
                            <section class="c-block__body c-block__body--padding">
                                <p>Adiciona as informações aqui</p>
                            </section>
                        </div>

Adicionando ícones

Podemos adicionar ícones no título para ficar melhor ilustrado a definição do block.

Adiciona as informações aqui

                    
                        <div class="c-block--gary">
                            <div class="c-block__header">
                                <label class="c-block__title"><i class="icon-home"></i>Block - Com ícone junto ao seu título</label>
                            </div>
                            <section class="c-block__body c-block__body--padding">
                                <p>Adiciona as informações aqui</p>
                            </section>
                        </div>