/Color StylesColor Styles

primary colors

As cores primárias podem ser utilizadas da seguinte maneira: Através de classes: .bg-primary ou variáveis: $primary.
Assim como no bootstrap elas podem ser usadas em backgrounds, textos e botões.

  • Primary
  • Secondary
  • Tertiary

institutional colors

As cores institucionais são sólidas. Podendo ser utilizadas nativamente através de classes base. Exemplos: .bg-inst-primary, .text-inst-primary, .btn-inst-primary. Essas classes vão exibir a gradação de cor 500. As demais gradações só podem ser acessadas através de variáveis. Exemplo: SASS: $inst-primary-100, CSS: var(--inst-primary-100)

  • Níveis
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
  • Primary
  • Secondary
  • Tertiary

gradients

Os gradientes de cores institucionais podem ser utilizados da seguinte maneira: Classe .bg-gradient-primary-{nível}. Variável $gradient-primary-{nível}

  • Níveis
  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h
  • Primary
  • Secondary
  • Tertiary
  • Gray

black-white

Para construir itens com opacidade de cor, utilize o .bg-opacity-{nível} ou .text-opacity-{nível} combinado com o .bg-black, .bg-white ou qualquer outra cor de backgroud/texto para graduar a quantidade de opacidade.

  • Níveis
  • 10
  • 20
  • 30
  • 40
  • 50
  • 60
  • 70
  • 80
  • 90
  • 100
  • Black
  • White

neutral

As cores neutras são sólidas, sem a propriedade opacidade. Para usar é só chamar .{bg ou text}-gray-{nível}. Exemplo: .text-gray-50

  • Níveis
  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
  • Gray

editorial colors

As cores editoriais são sólidas. Podendo ser utilizadas nativamente através de classes base. Exemplos: .bg-yellow, .text-yellow, .btn-yellow. Essa classe vai exibir a gradação de cor 500. As demais gradações só podem ser acessadas através de variáveis. Exemplo: SASS: $yellow-100 / CSS: var(--yellow-100)

  • Níveis
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
  • Yellow
  • Orange
  • Red
  • Pink
  • Purple
  • Indigo
  • Blue
  • Cyan
  • Teal
  • Green

/Text StylesText Styles

feeds

Para utilizar basta atribuir ao componente a classe com o nome .feed-{nível}, exemplo: .feed-title-sm

  • feed-title-xxl

  • feed-title-xl

  • feed-title-lg

  • feed-title-md

  • feed-title-sm

  • feed-title-xs

  • feed-author

  • feed-hat

  • feed-excert-lg

  • feed-excert-md

content

Para utilizar basta atribuir ao componente a classe com o nome .content-{nível}, exemplo: .content-title-light

  • content-bread

  • content-bread-light

  • content-title

  • content-title-light

  • content-hat

  • content-excert

  • content-description

  • content-author

  • content-infopost

  • content-text

  • content-text-bold

  • content-text-italic

    .content-text-italic
  • content-text-link a .content-text-bold

  • content-insert

  • content-quote

    .content-quote

  • content-title-h2

  • content-title-h3

  • content-title-h4

  • content-title-h5

  • content-title-h6

  • content-list

  • content-list-link

  • content-brand-title

  • content-brand-subtitle

  • content-brand-excert

parts

Para utilizar basta atribuir ao componente a classe com o nome. Exemplo: .heading-title-md

  • heading-title-lg

  • heading-title-md

  • heading-title-sm

  • header-section

  • footer-section

  • footer-subsection

  • footer-terms

  • menu-title

  • menu-section

  • menu-subsection

forms and buttons

Para utilizar basta atribuir ao componente a classe com o nome, exemplo: .form-title-lg

  • form-default-lg

  • form-default-lg-light

  • form-default-md

  • form-default-md-light

  • form-default-sm

  • form-default-sm-light

  • button-default-lg

  • button-default-lg-light

  • button-default-md

  • button-default-sm-light

  • button-default-sm

  • button-default-sm-light

  • button-header-menu

  • button-header-sign

  • button-footer-sign

  • button-nav-page

/FeedsFeeds

/HeadingsHeadings

Para utilizar basta atribuir ao componentes as props necessárias na hora de chamar o partial. Mude o tamanho do titulo, os paddings e o botão de call to action. O estado default de cada heading é MD.

heading default

Heading medium

Mais Notícias

Heading small

Mais Notícias

Heading large

Mais Notícias

heading controls

Heading medium

Mais Notícias

Heading small

Mais Notícias

Heading large

Mais Notícias

/ComponentsComponents

forms

Para utilizar basta atribuir ao componente a o input a classe .form-control-{nível}. Lembre-se de manter a estrutura .input-group > input ~ button

  • Níveis
  • -
  • lg
  • Forms

inputs

  • Tipos
  • radios
  • checkbox
  • switch
  • Inputs

buttons

Para utilizar basta atribuir ao componente a classe .btn .btn-{nível}

  • Tipos
  • primary
  • secondary
  • primary gradient
  • outline-primary
  • white
  • Inputs

buttons sizes

Para utilizar basta atribuir ao componente a classe .btn .btn-{nível} .btn-{size}

  • Tipos
  • sm
  • -
  • lg
  • Inputs

icons

A biblioteca de icones padrão do Publisher é o Bootstrap Icons. Porém alguns ícones tiveram um ajuste de peso aplicado, pois eram finos demais.

  • .bi-dash
  • .bi-chevron-down
  • .bi-chevron-up
  • .bi-chevron-right
  • .bi-chevron-left
  • Icons
  • .bi-x-lg
  • .bi-plus-lg
  • .bi-clock-history
  • .bi-arrow-repeat
  • .bi-arrow-counterclockwise
  • Icons
  • .bi-power
  • .bi-list
  • .bi-zoom-in
  • .bi-zoom-out
  • .bi-search
  • Icons

/UtilitiesUtilities

shadows

Para utilizar basta atribuir ao componente a classe .shadow-{nível}

  • Níveis
  • xs
  • sm
  • -
  • lg
  • xl
  • Shadows

darkmode

Nossos sites possuem conteúdo misto. Para utilizar componentes na versão dark use a classe .is-dark no elemento pai. Assim todos os elementos filhos vão entender que devem ser apresentados na versão dark. Caso não queira que algum elemento filho receba esse comportamento, adicione a classe .no-dark.

  • div
  • .text-primary
  • .text-primary .no-dark
  • Exemplos
  • Seox
  • Seox
  • div.is-dark
  • .text-primary
  • .text-primary .no-dark
  • Exemplos
  • Seox
  • Seox

line clamp

O Line clamp serve para limitar visualmente a quantidade de linhas de um texto. Para utilizar basta atribuir ao componente de texto .line-clamp-{nível}. Os níveis são de 1 a 10 linhas.

  • Níveis
  • .line-clamp-1
  • .line-clamp-2
  • ..
  • .line-clamp-10
  • Exemplos
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ullamcorper a risus id laoreet. Curabitur eget est eu justo varius pulvinar. Nam sit amet feugiat nisi, a congue mauris. Etiam sodales lorem at odio egestas, eu imperdiet nunc viverra. Sed fermentum sed enim eget pretium. Vestibulum mi risus, bold sit amet felis id, tempus viverra elit. Suspendisse eu mi eu text in italic et non est. Fusce ut quam ac tellus external link vitae et mauris. Nulla convallis nulla nunc, eu lobortis tortor efficitur sed. Sed sit amet est non nisl malesuada viverra sed et elit. Praesent at volutpat tellus.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ullamcorper a risus id laoreet. Curabitur eget est eu justo varius pulvinar. Nam sit amet feugiat nisi, a congue mauris. Etiam sodales lorem at odio egestas, eu imperdiet nunc viverra. Sed fermentum sed enim eget pretium. Vestibulum mi risus, bold sit amet felis id, tempus viverra elit. Suspendisse eu mi eu text in italic et non est. Fusce ut quam ac tellus external link vitae et mauris. Nulla convallis nulla nunc, eu lobortis tortor efficitur sed. Sed sit amet est non nisl malesuada viverra sed et elit. Praesent at volutpat tellus.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ullamcorper a risus id laoreet. Curabitur eget est eu justo varius pulvinar. Nam sit amet feugiat nisi, a congue mauris. Etiam sodales lorem at odio egestas, eu imperdiet nunc viverra. Sed fermentum sed enim eget pretium. Vestibulum mi risus, bold sit amet felis id, tempus viverra elit. Suspendisse eu mi eu text in italic et non est. Fusce ut quam ac tellus external link vitae et mauris. Nulla convallis nulla nunc, eu lobortis tortor efficitur sed. Sed sit amet est non nisl malesuada viverra sed et elit. Praesent at volutpat tellus.

others

Foram criadas mais algumas classes adicionais a fim de facilitar a vida na hora do desenvolvimento. Essas são classes simples, basicamente atalhos de CSS.

  • Negative Margin
  • .m-negative

  • Essa classe adiciona margem negativa ao elemento, dessa forma compensando os padding internos adicionados por classes como .container e .row

  • Gap Directions
  • .row-gap-{size} .column-gap-{size}

  • Permite que possamos definir diferentes gaps para cada eixo ao mesmo tempo.

  • Flex Growth
  • .flex-{size} [sizes de 1 a 12]

  • Funciona como a declaração flex: 1; e podem ser definidos tamanho até 12, criando a possibilidade de um sistema de pesos e prioridade no d-flex

  • Aspect Ratio
  • .aspect-16x9 .aspect-1x1

  • Permite utilizar de maneira clara as propriedades de aspect ratio. O bootstrap já possui classes pra isso, porém a aplicação delas é diferente.

  • Object fit
  • .fit-cover .fit-contain

  • Adicionam a propriedade object-fit ao elemente. Atalho muito poderoso quando combinado com o .aspect-ratio