# Container

A Container component can be used to wrap any content in a <div> container.

A Container component is created by adding ::: above and below any content.

In of itself, there should be no visible difference between content inside a Container vs not inside a Container. Visually, the final rendered content should look the same. For example:

The syntax used to create the above line is as follows:

:::
This text is inside a Container component.
:::

The difference is in the generated HTML. The above line of text is now created within a new <div> element:

<div>
    <p>This text is inside a Container component.</p>
</div>

The power of the Container component is how custom styling can be applied to the <div> container.

The above Container is configured by assigning the :::sample class to the opening of Container, and then defining an inline CSS class.

<style>
    .sample {
        text-align: center;
        color: #1956AF;
        border-radius: 10px;
        background-color: #E1EDFF;
        border: 1px solid #1956AF;
        padding-top: 20px;
        margin-bottom: 20px;
    }
</style>
:::sample
This text is wrapped in a Container component and has a custom css `class` applied.
:::

The Container component also supports applying generic attributes.

The following sample is used to configure the above Container:

:::sample { #container1 }
This Container has a custom `id` attribute.
:::

The generated HTML would be:

<div id="container1" class="sample">
    <p>This Container has a custom <code>id</code> attribute.</p>
</div>

It is also possible to include a global styles by adding to a new /_includes/head.html file.

The contents of _includes/head.html are added to all pages of the generated website.

For example, the inline <style> block above could be moved out of the page and then included automatically into all pages.

Create a new head.html file and place the file within a /_includes/ folder in the root of your project.

<style>
    .sample {
        text-align: center;
        color: #1956AF;
        border-radius: 10px;
        background-color: #E1EDFF;
        border: 1px solid #1956AF;
        padding-top: 20px;
        margin-bottom: 20px;
    }
</style>

Moving the <style> block into the _includes/head.html is all you need to do. Save the file and your new .sample css class is now available on all pages your website.

:::sample
This Container uses the `sample` class.
:::

Since the _includes/head.html can contain any custom HTML, you could also move your CSS into a separate **.css** file that is included on all pages of your generated website.

<link href="/static/custom.css" rel="stylesheet" />

.sample {
    text-align: center;
    color: #1956AF;
    border-radius: 10px;
    background-color: #E1EDFF;
    border: 1px solid #1956AF;
    padding-top: 20px;
    margin-bottom: 20px;
}

Being a separate .css file, web browsers will automatically cache the file, so re-downloading of the file with each page request is not required. This will improve the performance of your website.

Text, a Button, or any similar Retype component, can be center aligned on the page by nesting the component inside a Container and applying the content-center css class.

The following samples demonstrate center alignment of a Button and Text:

:::content-center
[!button My Button]
:::

:::content-center
This text should be centered :+1:
:::