Tile

Ready Added in 2.0.0

Create layout boxes with different backgrounds that can be arranged seamlessly next to each other.

Usage

To apply this component, add the .gls-tile class to a <div> element. By default, a tile is blank. That is why it is important to add one of the following modifier classes for styling.

Class	Description
`.gls-tile-default`	Applies the default tile background.
`.gls-tile-muted`	Applies a muted tile background.
`.gls-tile-gradient`	Applies a gradient tile background.
`.gls-tile-primary`	Applies the primary tile background.
`.gls-tile-primary-light`	Applies the lighter primary tile background.
`.gls-tile-secondary`	Applies a secondary tile background.
`.gls-tile-secondary-light`	Applies a lighter secondary tile background.
`.gls-tile-tertiary`	Applies a tertiary tile background.

<div class="gls-tile gls-tile-default"></div>

Default

Muted

Primary

Primary Light

Secondary

Secondary Light

Tertiary

Gradient

<div class="gls-child-width-1-2@s gls-grid-collapse gls-text-center" gls-grid>
    <div>
        <div class="gls-tile gls-tile-default">
            <p class="gls-h4">Default</p>
        </div>
    </div>
    <div>
        <div class="gls-tile gls-tile-muted">
            <p class="gls-h4">Muted</p>
        </div>
    </div>
    <div>
        <div class="gls-tile gls-tile-primary">
            <p class="gls-h4">Primary</p>
        </div>
    </div>
    <div>
        <div class="gls-tile gls-tile-primary-light">
            <p class="gls-h4">Primary Light</p>
        </div>
    </div>
    <div>
        <div class="gls-tile gls-tile-secondary">
            <p class="gls-h4">Secondary</p>
        </div>
    </div>
    <div>
        <div class="gls-tile gls-tile-secondary-light">
            <p class="gls-h4">Secondary Light</p>
        </div>
    </div>
    <div>
        <div class="gls-tile gls-tile-tertiary">
            <p class="gls-h4">Tertiary</p>
        </div>
    </div>
    <div>
        <div class="gls-tile gls-tile-gradient">
            <p class="gls-h4">Gradient</p>
        </div>
    </div>
</div>

Tile and padding

The tile component has some padding by default. To remove this or to apply different spacing, add one of the classes from the Padding component.

<div class="gls-tile gls-tile-default gls-padding-large"></div>

Remove

Small

Large

<div class="gls-child-width-1-3@s gls-grid-small gls-text-center" gls-grid>
    <div>
        <div class="gls-tile gls-tile-muted gls-padding-remove">
            <p class="gls-h4">Remove</p>
        </div>
    </div>
    <div>
        <div class="gls-tile gls-tile-primary gls-padding-small">
            <p class="gls-h4">Small</p>
        </div>
    </div>
    <div>
        <div class="gls-tile gls-tile-secondary gls-padding-large">
            <p class="gls-h4">Large</p>
        </div>
    </div>
</div>