Atoms

Colors

Component: ./components/atoms/GlobalColors.php

CSS: ./styles/sass/00_base/_variables.scss

Color palette

  • $color-primary
    #000
  • $color-secondary
    #000
  • $color-accent1
    #000
  • $color-accent2
    #000
  • $color-accent3
    #000
  • $color-gray1
    #000
  • $color-gray2
    #000
  • $color-black
    #000
  • $color-white
    #000
  • $color-success
    #000
  • $color-warning
    #000
  • $color-error
    #000

Fonts

Component: ./components/atoms/GlobalFonts.php

CSS: ./styles/sass/00_base/_variables.scss

Heading

HelveticaNeue", "Helvetica", "Arial", sans-serif;

Body

Open sans", "Helvetica", "Arial", sans-serif;

Buttons

Component: ./components/atoms/Button.php

CSS: ./styles/sass/01_atoms/_a-buttonAnchor.scss

Textfield

Component: ./components/atoms/FormTextField.php

CSS: ./styles/sass/01_base/_a-form.scss

Textfield (enabled)

Textfield (requierd)

Textfield (disabled)

Textarea

Component: ./components/atoms/FormTextArea.php

CSS: ./styles/sass/01_atoms/_a-form.scss

Textarea (enabled)

Textarea (disabled)

Select

Component: ./components/atoms/FormSelect.php

CSS: ./styles/sass/01_atoms/_a-form.scss

Select (enabled)

Select (disabled)

Label

Component: ./components/atoms/Label.php

CSS: ./styles/sass/01_atoms/_a-form.scss

Label

FormErrorMessage

Component: ./components/atoms/FormErrorMessage.php

CSS: ./styles/sass/01_atoms/_a-form.scss

Error message

Label

Radio

Component: ./components/atoms/FormRadio.php

CSS: ./styles/sass/01_atoms/_variables.scss

Radio (enabled)

Radio (disabled)

Checkbox

Component: ./components/atoms/FormTextField.php

CSS: ./styles/sass/01_base/_a-form.scss

Checkbox (enabled)

Checkbox (disabled)

Heading

Component: ./components/atoms/TextHeading*.php

CSS: ./styles/sass/00_base/_typogrpahy.scss

Heading

Heading 1

Heading 2

Heading 3

Heading 4

Paragraph

Component: ./components/atoms/TextParagraph.php

CSS: ./styles/sass/00_base/_typogrpahy.scss

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Anchor filepath

Component: ./components/atoms/TextAnchor.php

CSS: ./styles/sass/00_base/_typogrpahy.scss

Blockquote filepath

Component: ./components/atoms/TextBlockQuote.php

CSS: ./styles/sass/00_base/_typogrpahy.scss

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

List

CSS: ./styles/sass/00_base/_typogrpahy.scss

Bullet list

  • Bullet list
  • Bullet list
  • Bullet list
  • Bullet list
  • Bullet list
  • Bullet list

Ordered list

  1. List with numbering
  2. List with numbering
  3. List with numbering
  4. List with numbering
  5. List with numbering
  6. List with numbering

List without bullets

  • List without bullets
  • List without bullets
  • List without bullets
  • List without bullets
  • List without bullets
  • List without bullets

Icon filepath

Component: ./components/atoms/Icon.php

CSS: ./styles/sass/01_atoms/_Icon.scss

Icon

Icon size

Icon animation

Logo image

Component: ./components/atoms/ImageLogo.php

CSS: ./styles/sass/01_atoms/_a-Image.scss

Landscape image

Component: ./components/atoms/ImageLandscape.php

CSS: ./styles/sass/01_atoms/_a-Image.scss

Landscape image (16:9)

description text

Square image filepath

Component: ./components/atoms/ImageSquare.php

CSS: ./styles/sass/01_atoms/_a-Image.scss

Square image (1:1)

description text

Portrait image filepath

Component: ./components/atoms/ImagePortrait.php

CSS: ./styles/sass/01_atoms/_a-Image.scss

Portrait image (4:3)

description text

Avatar image filepath

Component: ./components/atoms/ImageAvatar.php

CSS: ./styles/sass/01_atoms/_a-Image.scss

Avatar image

Video filepath

Component: ./components/atoms/Video.php

CSS: ./styles/sass/01_atoms/_a-Video.scss

Video

Atoms | Occident