Alert

                    
                        <div class="o-alert--info" role="alert">O Stilize é um framework CSS que utiliza as linguagens SASS e Typescript.</div>
                        <div class="o-alert--error" role="alert">Erro, aconteceu algum erro durante sua operação.</div>
                        <div class="o-alert--success" role="alert">Parabéns, tudo ocorreu bem com sua operação.</div>
                        <div class="o-alert--warning" role="alert">Atenção, faz tempo que você não realiza o backup do seu sistema.</div>
                    
                

Alinhando o texto

Também podemos alinhar o texto em diferente posições.

Alinhando áo centro

                    
                        <div class="o-alert--info is-alignCenter" role="alert">O Stilize é um framework CSS que utiliza as linguagens SASS e Typescript.</div>
                        <div class="o-alert--error is-alignCenter" role="alert">Erro, aconteceu algum erro durante sua operação.</div>
                        <div class="o-alert--success is-alignCenter" role="alert">Parabéns, tudo ocorreu bem com sua operação.</div>
                        <div class="o-alert--warning is-alignCenter" role="alert">Atenção, faz tempo que você não realiza o backup do seu sistema.</div>
                    
                

Alinhando á direita

                    
                        <div class="o-alert--info is-alignRight" role="alert">O Stilize é um framework CSS que utiliza as linguagens SASS e Typescript.</div>
                        <div class="o-alert--error is-alignRight" role="alert">Erro, aconteceu algum erro durante sua operação.</div>
                        <div class="o-alert--success is-alignRight" role="alert">Parabéns, tudo ocorreu bem com sua operação.</div>
                        <div class="o-alert--warning is-alignRight" role="alert">Atenção, faz tempo que você não realiza o backup do seu sistema.</div>
                    
                

Destacando uma palavra

Também podemos dar um destaque maior em alguma palavra adicionando a tag strong.

                    
                        <div class="o-alert--info" role="alert">O <strong>Stilize</strong> é um framework CSS que utiliza as linguagens <strong>SASS</strong> e <strong>Typescript</strong>.</div>
                        <div class="o-alert--error" role="alert"><strong>Erro</strong>, aconteceu algum erro durante sua operação.</div>
                        <div class="o-alert--success" role="alert"><strong>Parabéns</strong>, tudo ocorreu bem com sua operação.</div>
                        <div class="o-alert--warning" role="alert"><strong>Atenção</strong>, faz tempo que você não realiza o backup do seu sistema.</div>
                    
                

Adicionando ícones

Para que o alert fique um pouco mais informativo podemos adicionar alguns ícones junto com sua descrição.

Alinhando á esquerda

                    
                        <div class="o-alert--info" role="alert">O Stilize é um framework CSS que utiliza as linguagens SASS e Typescript.<i class="icon-attention-circled is-left"></i></div>
                        <div class="o-alert--error" role="alert">Erro, aconteceu algum erro durante sua operação.<i class="icon-cancel-circled is-left"></i></div>
                        <div class="o-alert--success" role="alert">Parabéns, tudo ocorreu bem com sua operação.<i class="icon-ok-circled is-left"></i></div>            
                        <div class="o-alert--warning" role="alert">Atenção, faz tempo que você não realiza o backup do seu sistema.<i class="icon-attention is-left"></i></div>            
                    
                

Alinhando á direita

                    
                        <div class="o-alert--info" role="alert">O Stilize é um framework CSS que utiliza as linguagens SASS e Typescript.<i class="icon-attention-circled is-right"></i></div>
                        <div class="o-alert--error" role="alert">Erro, aconteceu algum erro durante sua operação.<i class="icon-cancel-circled is-right"></i></div>
                        <div class="o-alert--success" role="alert">Parabéns, tudo ocorreu bem com sua operação.<i class="icon-ok-circled is-right"></i></div>            
                        <div class="o-alert--warning" role="alert">Atenção, faz tempo que você não realiza o backup do seu sistema.<i class="icon-attention is-right"></i></div>