Introduction Foundations Components Patterns Directives Pipes Motion Brand

Components

Structure

Title card

Alerts & notifications

Banner alert Banner announcement Floating action Toast alert

Buttons & actions

Button Link Pull refresh Share buttons Share link Social buttons Split button Toggle buttons

Cards

Card Widget

Forms

Checkbox card Checkbox File select Input Label Location input Multi select Multiple location input Radio Search Select Slider Smart textarea Textarea Toggle

Gallery / images / media

Gallery mosaic

Icons / images / media

Animated svg File viewer Icon Image cropper

Layouts

Container Grid Page layout Table

Navigation

Breadcrumbs Pagination Tabs

Popups / overlays

Callout Drawer Dropdown filter Highlight Modal More options Tooltip

Progress & loading indicators

Countdown timer Loading text Progress bar Progress steps Spinner

Tags

Tag

Typography

Heading Hr

Container

The container component is used to literally contain elements using standard maximum widths and center it in the page. This component doesn't have any paddings by default in mobile but supports side notches.
Contents
Default Mobile padding Sizes
[mobilePadding]="false"
By default, the fl-container component does not have any padding in mobile screens, stretching the content to the edges of the screen and maximize screen real-estate usage.
[mobilePadding]="true"
A mobile padding can be added via mobilePadding input which is useful for non card like sections so that the content will have a descent space away from the edge.
Inputs
mobilePadding ?: boolean = false
padding ?: boolean = true
size ?: ContainerSize = ContainerSize.DESKTOP_LARGE
sizeDesktopLarge ?: ContainerSize
sizeDesktopSmall ?: ContainerSize
sizeDesktopXLarge ?: ContainerSize
sizeDesktopXXLarge ?: ContainerSize
sizeTablet ?: ContainerSize
Loading preview
Permission granted for Geolocation.
Your login session has expired and you have been logged out. Please log in again.