<brls:Box
    width="auto"
    height="auto">

    <brls:ScrollingFrame
        width="auto"
        height="auto"
        grow="1.0" >

        <brls:Box
            width="auto"
            height="auto"
            axis="column"
            paddingLeft="@style/brls/tab_frame/content_padding_sides"
            paddingRight="@style/brls/tab_frame/content_padding_sides"
            paddingTop="@style/brls/tab_frame/content_padding_top_bottom"
            paddingBottom="@style/brls/tab_frame/content_padding_top_bottom">

                <brls:Label
                    width="auto"
                    height="auto"
                    text="@i18n/demo/welcome"
                    marginBottom="10px" />

                <!-- Buttons -->
                <brls:Header
                    width="auto"
                    height="auto"
                    title="@i18n/demo/components/buttons_header"
                    marginBottom="30px" />

                <brls:Box
                    width="100%"
                    height="auto"
                    axis="row"
                    marginBottom="30px">

                    <brls:Button
                        id="button_primary"
                        width="auto"
                        height="auto"
                        style="primary"
                        grow="1.0"
                        marginRight="30px"
                        text="@i18n/demo/components/button_primary" />

                    <brls:Button
                        id="button_highlight"
                        width="auto"
                        height="auto"
                        style="highlight"
                        text="@i18n/demo/components/button_highlight"
                        focusDown="button_bordered" />

                </brls:Box>

                <brls:Box
                    width="100%"
                    height="auto"
                    axis="row"
                    marginBottom="30px">

                    <brls:Button
                        width="33%"
                        height="auto"
                        marginRight="30px"
                        text="@i18n/demo/components/button_wrapping" />

                    <brls:Box
                        width="auto"
                        height="auto"
                        grow="1.0"
                        axis="column">

                        <brls:Button
                            id="button_bordered"
                            width="auto"
                            height="auto"
                            padding="10px"
                            style="bordered"
                            fontSize="16"
                            text="@i18n/demo/components/button_bordered"
                            marginBottom="30px" />

                        <brls:Button
                            width="auto"
                            height="auto"
                            padding="10px"
                            style="borderless"
                            fontSize="16"
                            text="@i18n/demo/components/button_borderless" />

                    </brls:Box>

                </brls:Box>

                <!-- Labels -->
                <brls:Header
                    width="auto"
                    height="auto"
                    title="@i18n/demo/components/labels_header"
                    marginBottom="30px" />

                <brls:Label
                    width="auto"
                    height="auto"
                    text="@i18n/demo/components/regular_label"
                    marginBottom="30px" />

                <brls:Box
                    width="auto"
                    height="auto"
                    axis="row"
                    justifyContent="spaceEvenly"
                    marginBottom="30px" >

                    <brls:Label
                        width="30%"
                        height="auto"
                        text="@i18n/demo/components/label_left"
                        horizontalAlign="left" />

                    <brls:Label
                        width="30%"
                        height="auto"
                        text="@i18n/demo/components/label_center"
                        horizontalAlign="center" />

                    <brls:Label
                        width="30%"
                        height="auto"
                        text="@i18n/demo/components/label_right"
                        horizontalAlign="right" />

                </brls:Box>

                <!-- Images -->
                <brls:Header
                    width="auto"
                    height="auto"
                    title="@i18n/demo/components/images_header_title"
                    subtitle="@i18n/demo/components/images_header_subtitle"
                    marginBottom="30px" />

                <brls:Box
                    width="auto"
                    height="auto"
                    axis="row"
                    alignItems="center"
                    justifyContent="spaceEvenly"
                    marginBottom="30px">

                    <CaptionedImage
                        width="auto"
                        height="auto"
                        imageWidth="76px"
                        imageHeight="76px"
                        image="@res/img/tiles.png"
                        caption="@i18n/demo/components/images_downscaled" />

                    <CaptionedImage
                        id="image_original"
                        width="auto"
                        height="auto"
                        imageWidth="auto"
                        imageHeight="auto"
                        image="@res/img/tiles.png"
                        caption="@i18n/demo/components/images_original" />

                    <CaptionedImage
                        id="image_upscaled"
                        width="auto"
                        height="auto"
                        imageWidth="170px"
                        imageHeight="170px"
                        maxWidth="170px"
                        image="@res/img/tiles.png"
                        caption="@i18n/demo/components/images_upscaled"
                        focusDown="image_cropped" />

                </brls:Box>

                <brls:Box
                    width="auto"
                    height="auto"
                    axis="row"
                    alignItems="center"
                    justifyContent="spaceEvenly">

                    <CaptionedImage
                        width="auto"
                        height="auto"
                        imageWidth="400px"
                        imageHeight="75px"
                        image="@res/img/tiles.png"
                        scalingType="stretch"
                        caption="@i18n/demo/components/images_stretched" />

                    <CaptionedImage
                        id="image_cropped"
                        width="auto"
                        height="auto"
                        imageWidth="auto"
                        imageHeight="75px"
                        image="@res/img/tiles.png"
                        scalingType="crop"
                        caption="@i18n/demo/components/images_cropped"
                        focusUp="image_upscaled" />

                </brls:Box>

        </brls:Box>

    </brls:ScrollingFrame>

</brls:Box>
