Paragon Design System

Technical Documentation

Theme

npm_versionnpm Paragon package page

Container

Edit this pagein a new tabLeave feedbackin a new tab

The base container to contain, pad, and center content in the viewport. This component extends the React-Bootstrap Container.
See React-Bootstrap for more documentation.

Basic Usage

Any Paragon component or export may be added to the code example.

Theme Variables (SCSS)#

$max-width-xs:  464px !default;
$max-width-sm:  708px !default;
$max-width-md:  952px !default;
$max-width-lg:  1192px !default;
$max-width-xl:  1440px !default;

Props API#

Container Props API
  • as elementType

    Override the base element

    Default'div'
  • children node
  • fluid bool

    Fill all available space at any breakpoint

    Defaulttrue
  • size enum"xs" | "sm" | "md" | "lg" | "xl"

    Set the maximum width for the container

Usage Insights#

Container

Project NameParagon VersionInstance Count
edx-ora220.9.21
frontend-app-account20.46.32
frontend-app-admin-portal20.46.314
frontend-app-authn20.46.21
frontend-app-communications20.46.21
frontend-app-course-authoring20.46.215
frontend-app-enterprise-public-catalog20.46.34
frontend-app-learner-dashboard20.46.23
frontend-app-learner-portal-enterprise20.45.439
frontend-app-learner-record20.46.31
frontend-app-library-authoring21.5.62
frontend-app-ora-grading20.46.31
frontend-app-support-tools20.46.06
frontend-component-header-edx21.5.61
frontend-component-header21.5.61
catalog-search20.45.01
frontend-lib-content-components21.5.65
frontend-lib-special-exams20.44.012
frontend-platform21.5.61
frontend-template-application20.46.31
prospectus20.46.2103
Edit this pagein a new tabLeave feedbackin a new tab

Contents

All components (A-Z)