Start

Get StartedHello WorldResourcesSetup

Learn

Best PracticesMobileColorSizingPaddingTypographyWriting StyleDate and TimeCapitalizationNavigation

Reference

ArchitectureIntegrationAccessibilityBrowser SupportAbout
Showcase

Templates

Primary PageSub PageDetail PageVertical NarrativeInfographic

Components

Layout

BoxColumnsLayerSplit

Structure

AppArticleCardFooterHeaderHeroNotificationSectionSidebarToastValue

Text

HeadingHeadlineLabelMarkdownParagraphQuoteTimestampTitle

Controls

AccordionAnchorButtonFilterControlMenuSearchSortTabsTip

Forms

CheckBoxDateTimeFormFormFieldLoginFormNumberInputPasswordInputRadioButtonSearchInputSelectTextInput

Listing

ListListPlaceholderTableTableHeaderTiles

Visualization

AnnotatedMeterChartDistributionLegendMapMeterSunBurstTopologyWorldMap

Icons

IconPulseSocialShareSpinningStatus

Media

CarouselImageVideo

Utils

AnimateAnnouncerQueryResponsiveRestRestWatch
Main Content

App

This is the primary Grommet container outer. Typically it will either contain a Split or an Article.

Sidebar
Main content
Header
Sections
Footer

Properties

centered true|false
Whether to centralize or not the content inside the container. Defaults to true.
inline true|false
Whether to render the app relative to the container (inline) or to the browser window. Defaults to false.

Usage

import App from 'grommet/components/App';

<App>
  {contents}
</App>
This work is licensed under the Creative Commons Attribution 4.0 International License.