Squared

• src
• components
• squared.scss

Class list

Description

.squared is a versatile element that can be used to contain an img, or some text. By default, the dimensions of .squared are 1:1 with the font-size that is applied to it, with a default font-size of 1.6rem.

Example

<figure class="squared dark"></figure>

Multipliers

Use the multiplier classes on a .squared to change the size ratio in relation to whatever font-size is applied to the square.

<figure class="squared dark"></figure>
<figure class="squared dark x2"></figure>
<figure class="squared dark x3"></figure>
<figure class="squared dark x4"></figure>

Text

Use the .text class on a .squared to center the text within, along the x and y axes.

<figure class="squared dark x4 text">SB</figure>

Image

Any img element used within a .squared will take up the full dimensions of the square.

<figure class="squared x4">
    <img src="/path/to/img" alt="image">
</figure>

Font size scaling

Use the font-size utility classes on a .squared to change the dimensions of the .squared.

<figure class="squared dark h5"></figure>
<figure class="squared dark"></figure>
<figure class="squared dark h3"></figure>
<figure class="squared dark h2"></figure>
<figure class="squared dark h1"></figure>