Cerrar
#SCSF23

    Styleguide

    Colorpalette

    Primary

    .bg-color-primary
    .bg-color-inside-primary

    Secondary

    .bg-color-secondary
    .bg-color-inside-secondary

    Palette 1

    USE CLASS
    .bg-color-palette-1
    .bg-color-inside-palette-1

    Palette 2

    USE CLASS
    .bg-color-palette-2
    .bg-color-inside-palette-2

    Palette 3

    USE CLASS
    .bg-color-palette-3
    .bg-color-inside-palette-3

    Palette 4

    USE CLASS
    .bg-color-palette-4
    .bg-color-inside-palette-4

    White: #fff

    bg-color-cwhite
    bg-color-inside-cwhite

    Black #000

    bg-color-cblack
    bg-color-inside-cblack

    Danger

    USE CLASS
    .bg-color-danger
    .bg-color-inside-danger

    Warning

    USE CLASS
    .bg-color-warning
    .bg-color-inside-warning

    Info

    USE CLASS
    .bg-color-info
    .bg-color-inside-info

    Success

    USE CLASS
    .bg-color-success
    .bg-color-inside-success

    Escala de grises

    Lightest

    USE CLASS
    .bg-color-lightest
    .bg-color-inside-lightest

    Lighter

    USE CLASS
    .bg-color-lighter
    .bg-color-inside-lighter

    Light

    USE CLASS
    .bg-color-light
    .bg-color-inside-light

    Medium

    USE CLASS
    .bg-color-medium
    .bg-color-inside-medium

    Dark

    USE CLASS
    .bg-color-dark
    .bg-color-inside-dark

    Darker

    USE CLASS
    .bg-color-darker
    .bg-color-inside-darker

    Darkest

    USE CLASS
    .bg-color-darkest
    .bg-color-inside-darkest

    Backgrounds

    BG 1

    USE CLASS
    .bg-color-bg-1
    .bg-color-inside-bg-1

    BG 2

    USE CLASS
    .bg-color-bg-2
    .bg-color-inside-bg-2

    BG 3

    USE CLASS
    .bg-color-bg-3
    .bg-color-inside-bg-3

    BG 4

    USE CLASS
    .bg-color-bg-4
    .bg-color-inside-bg-4

    Headings

    H1.hero - heading - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    H1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    H2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    H3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    H4 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    H5 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    H6 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Text

    xs – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo

    sm – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo

    md – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo

    lg – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo

    xl – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo

    • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

    Section

    .accent-color

    .muted

    Section

    .accent-color-reverse

    .muted-reverse

    Box border

    Class a les columnes:

    .bg-color-inside-cwhite
    .box-border

    Box shadow

    Class a les columnes:

    .bg-color-inside-cwhite
    .box-shadow

    .section

    Add Your Heading Text Here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

    A la section: .bg-color-secondary-noreverse o .bg-color-primary-noreverse
    A la columna: .bg-color-cwhite
    A innersection: .section-no-gutter