<div class="grid">
    <div class="grid__row">
        <div class="grid__col--lg-4 grid__col--sm-6 grid__col--xs-12">
            <div class="styleguide__circle styleguide__circle--dark-text styleguide--border">
                <p class="styleguide__circle-name">$border-color</p>
                <span class="styleguide__circle-val">#b0c2e3</span>
            </div>
        </div>
        <div class="grid__col--lg-4 grid__col--sm-6 grid__col--xs-12">
            <div class="styleguide__circle styleguide--text">
                <p class="styleguide__circle-name">$text-color</p>
                <span class="styleguide__circle-val">#05182A</span>
            </div>
        </div>
        <div class="grid__col--lg-4 grid__col--sm-6 grid__col--xs-12">
            <div class="styleguide__circle styleguide__circle--dark-text styleguide--background-color">
                <p class="styleguide__circle-name">$background-color</p>
                <span class="styleguide__circle-val">#f5f5f5</span>
            </div>
        </div>
    </div>
</div>