Contenu principal Navigation Pied de page
Logo UPJV Logo Design System UPJV
  • Docs
    • Introduction
    • Installation
    • Utilisation
  • Styles
    • Aperçu
    • Couleurs
    • Typographie
    • Espacements
    • Iconographie
  • Variables
  • Classes utilitaires
    • Aperçu

    • MISE EN PAGE

      • aspect-ratio
      • display
      • float
      • clear
      • object-fit
      • object-position
      • position
      • overflow
      • visibility
      • isolation
      • z-index

    • FLEXBOX & GRID

      • flex-basis
      • flex-direction
      • flex-wrap
      • flex
      • flex-grow
      • flex-shrink
      • order
      • grid-template-columns
      • grid-column
      • grid-template-rows
      • grid-row
      • grid-auto-flow
      • grid-auto-columns
      • grid-auto-rows
      • gap
      • justify-content
      • justify-items
      • justify-self
      • align-content
      • align-items
      • align-self
      • place-content
      • place-items
      • place-self

    • SPACING

      • margin
      • padding

    • SIZING

      • width
      • min-width
      • max-width
      • height
      • min-height
      • max-height

    • TYPOGRAPHIE

      • color
      • font-family
      • font-size
      • font-smoothing
      • font-style
      • font-weight
      • letter-spacing
      • list-style-position
      • list-style-type
      • text-align
      • text-decoration
      • text-indent
      • text-overflow
      • text-transform
      • text-wrap
      • vertical-align
      • white-space
      • word-break

    • BACKGROUNDS

      • background-attachment
      • background-clip
      • background-color
      • background-image
      • background-origin
      • background-position
      • background-repeat
      • background-size

    • BORDURES

      • border-color
      • border-radius
      • border-style
      • border-width
      • outline-color
      • outline-width
      • outline-style
      • outline-offset

    • EFFETS

      • shadow
      • opacity
      • mix-blend-mode
      • background-blend-mode

    • FILTRES

      • filter
      • blur
      • brightness
      • contrast
      • drop-shadow
      • grayscale
      • hue-rotate
      • invert
      • saturate
      • sepia
      • backdrop-filter
      • blur
      • brightness
      • contrast
      • grayscale
      • hue-rotate
      • invert
      • opacity
      • saturate
      • sepia

    • TRANSITIONS & ANIMATION

      • transition-property
      • transition-behavior
      • transition-duration
      • transition-timing-function
      • transition-delay
      • animation

    • TRANSFORM

      • backface-visibility
      • perspective
      • perspective-origin
      • rotate
      • scale
      • skew
      • transform
      • transform-origin
      • transform-style
      • translate

    • INTERACTIVITÉ

      • curseur
      • :hover

    • SVG

      • fill
      • stroke
      • stroke-width

    • DIVERS

      • icons
      • logos
  • Composants
    • Aperçu

    • accessibility

      • Skip-links

    • ACTION

      • Bouton
      • Modal
      • Popover

    • DATA DISPLAY

      • Accordéon
      • Avatar
      • Badge
      • Card
      • Collapse
      • Table
      • Kbd

    • DATA INPUT

      • Checkbox
      • Filtre
      • Radio
      • Input Field
      • Select
      • Upload
      • Switch
      • Text Area

    • FEEDBACK

      • Alert
      • Progress
      • Status
      • Spinner
      • Skeleton
      • Tooltip
      • Toast

    • LAYOUT

      • Divider

    • NAVIGATION

      • Breadcrumb
      • Command Palette
      • Menu
      • Pagination
      • Steps
      • Table des matières
      • Tabs

    • UX

      • Scroll to Top
      • Switch Theme
      • Shape Switcher
  • Sections
    • Aperçu
  • Templates
    • Aperçu
    • Drawer
  • Pages
    • Aperçu
    • Authentification
    • Erreurs
    • Maintenance
logo de la DiSI

Préférences

Thème
Forme
  • Carré
  • Adouci
  • Arrondi

À propos de cette documentation

Cette documentation du Design System UPJV a été conçue et développée par la Direction des Systèmes d'Information (DiSI) de l'Université de Picardie Jules Verne.

Conception & maintenance :
Pierre Fardel, UX/UI Designer
Direction des Systèmes d'Information

Objectifs

  • Unifier l'identité visuelle numérique de l'UPJV
  • Accélérer le développement des interfaces
  • Garantir l'accessibilité et l'inclusion
  • Faciliter la collaboration entre équipes

Contact :
Pour toute question, suggestion ou contribution au Design System, contactez l'équipe DiSI via pierre.fardel@u-picardie.fr

Design System UPJV v1.0.0 • Dernière mise à jour : Juin 2026