Paragon Design System

Technical Documentation

Theme

PlaygroundBeta

npm_versionnpm Paragon package page

Image

This is a pass through component from React-Bootstrap.
See React-Bootstrap for documentation.

Basic Styles

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

<>

  <Image

    className="mr-2"

    src="https://picsum.photos/100/100/"

    rounded

    alt="Image description"

  />

  <Image

    className="mr-2"

    src="https://picsum.photos/100/100/"

    roundedCircle

    alt="Image description"

  />

  <Image

    className="mr-2"

    src="https://picsum.photos/100/100/"

    thumbnail

    alt="Image description"

  />

</>

Fluid Sizing

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

<Image src="https://picsum.photos/1600/800/" fluid alt="Image description" />

Theme Variables (SCSS)#

$thumbnail-padding:                  .25rem !default;
$thumbnail-bg:                       $body-bg !default;
$thumbnail-border-width:             $border-width !default;
$thumbnail-border-color:             theme-color("gray", "border") !default;
$thumbnail-border-radius:            $border-radius !default;
$thumbnail-box-shadow:               0 1px 2px rgba($black, .075) !default;
$figure-caption-font-size:           90% !default;
$figure-caption-color:               theme-color("gray", "light-text") !default;

Usage Insights#

Image

Project NameParagon VersionInstance Count
frontend-app-admin-portal20.26.33
frontend-app-authn20.36.27
frontend-app-enterprise-public-catalog20.29.05
frontend-app-learner-dashboard20.32.04
frontend-app-learner-portal-enterprise20.36.04
frontend-lib-content-components20.34.05
prospectus20.32.31
Leave feedback

Contents

All components (A-Z)