Container

The Container component is used to group content and elements in a section-like layout.

The Container contains 4 sub-components you can use to help you create WordPress settings pages layouts faster, Container.Header, Container.Block, Container.SettingsField and Container.Footer.

Settings

This is a description of the settings page.

Random Block Content

You can pass any content in here.

Performance Settings

Boost speed and performance by storing a copy of your website content, files,and images online so the pages of your website load faster for your visitors.

Performance Settings

Enable Cache

Activate the cache to boost your website speed and performance.

Minify Assets

Minify your website assets to reduce the size of your website files.

---

Usage

import { Container } from "@newfold/ui-component-library";

<Container>
    <Container.Header 
        title="Settings" 
        description="This is a description of the settings page." 
    />
    <Container.Block separator={true}>
        <div>
            <Title>Random Block Content</Title>
            <p>
                Container can pass any content in here.
            </p>
        </div>
    </Container.Block>
    <Container.Block>
        <Container.SettingsField 
            title="Performance Settings" 
            description="Boost speed and performance by storing a copy of your website content,
            files, and images online so the pages of your website load faster for your visitors." 
        >
            ...Performance settings fields
        </Container.SettingsField>
    </Container.Block>
    <Container.Footer>
        <div>
            <Button>Save changes</Button>
        </div>
    </Container.Footer>
</Container>

---

Container Props

Attribute	Type	Description	Default
as	string |	The HTML element to render.	div
children	node |	The content of this container.	-
className	string |	-	-

---

Sub-components

The Container component contains 3 sub-components you can use to help you create WordPress settings pages layouts faster.

Container.Header

The Container.Header component is used to display a title and description for this instance of the container.

import { Container } from "@newfold/ui-component-library";

<Container>
    <Container.Header 
        title="Settings" 
        description="This is a description of the settings page." 
    />
</Container>

Container.Header Props

Attribute	Type	Description	Default
as	string |	The HTML element to render.	div
title	string |	-	-
description	string |	-	-
children	node |	The content of the header to render after the title and description.	-
className	string |	-	-

---

Container.Block

The Container.Block component is used to group content and elements together.

import { Container } from "@newfold/ui-component-library";

<Container>
    <Container.Block separator={true}>
        <div>
            <Title>Random Block Content</Title>
            <p>
                Container can pass any content in here.
            </p>
        </div>
    </Container.Block>
</Container>

Container.Block Props

Attribute	Type	Description	Default
as	string |	The HTML element to render.	div
children	node |	The content of this block.	-
separator	bool |	Whether to render a separator after the block.	false
id	string |	-	-
className	string |	-	-

---

Container.SettingsField

The Container.SettingsField can be used to generate settings layouts.

import { Container } from "@newfold/ui-component-library";

<Container>
    <Container.Block>
        <Container.SettingsField 
            title="Performance Settings" 
            description="Boost speed and performance by storing a copy of your website content,
            files, and images online so the pages of your website load faster for your visitors." 
        >
            ...Performance settings fields
        </Container.SettingsField>
    </Container.Block>
</Container>

Container.SettingsField Props

Attribute	Type	Description	Default
as	string |	The HTML element to render.	div
title	string |	The title of the settings field.	-
description	string |	The description of the settings field.	-
children	node |	The content of this block.	-
className	string |	-	-

---

Container.Footer

The Container.Footer component is used to display a footer for this instance of the container.

import { Container } from "@newfold/ui-component-library";

<Container>
    <Container.Footer>
        ...Footer content
    </Container.Footer>
</Container>

Container.Footer Props

Attribute	Type	Description	Default
as	string |	The HTML element to render.	div
children	node |	The content of the footer to render.	-
className	string |	-	-