Color

Use color utilities to quickly style the text and background color of an element. Great for container, buttons, or any other element.

Text Color

Result

Loading...

Live Editor

<div className="example-block">
    <p className="hf-text-light hf-bg-dark">.hf-text-light</p>
    <p className="hf-text-dark">.hf-text-dark</p>
    <p className="hf-text-success">.hf-text-success</p>
    <p className="hf-text-warning">.hf-text-warning</p>
    <p className="hf-text-error">.hf-text-error</p>
    <p className="hf-text-danger">.hf-text-danger</p>
    <p className="hf-text-primary">.hf-text-primary</p>
    <p className="hf-text-primary-light hf-bg-dark">.hf-text-primary-light</p>
    <p className="hf-text-secondary">.hf-text-secondary</p>
    <p className="hf-text-secondary-light">.hf-text-secondary-light</p>
    <p className="hf-text-info">.hf-text-info</p>
    <p className="hf-text-info-light hf-bg-dark">.hf-text-info-light</p>
</div>

Background Color

Result

Loading...

Live Editor

<div className="example-block">
    <div className="hf-bg-light" style={{ color: 'black' }}>.hf-bg-light</div>
    <div className="hf-bg-dark">.hf-bg-dark</div>
    <div className="hf-bg-success">.hf-bg-success</div>
    <div className="hf-bg-warning" style={{ color: 'black' }}>.hf-bg-warning</div>
    <div className="hf-bg-error">.hf-bg-error</div>
    <div className="hf-bg-danger">.hf-bg-danger</div>
    <div className="hf-bg-highlight" style={{ color: 'black' }}>.hf-bg-highlight</div>
    <div className="hf-bg-primary">.hf-bg-primary</div>
    <div className="hf-bg-primary-light" style={{ color: 'black' }}>.hf-bg-primary-light</div>
    <div className="hf-bg-secondary">.hf-bg-secondary</div>
    <div className="hf-bg-secondary-light" style={{ color: 'black' }}>.hf-bg-secondary-light</div>
    <div className="hf-bg-info">.hf-bg-info</div>
    <div className="hf-bg-info-light" style={{ color: 'black' }}>.hf-bg-info-light</div>
</div>

Button Color

Result

Loading...

Live Editor

<div className="example-block">
    <div className="button-group">
        <div className="hf-button-primary">.hf-button-primary</div>
        <div className="hf-button-primary hover">.hf-button-primary.hover</div>
    </div>
    <div className="button-group">
        <div className="hf-button-secondary">.hf-button-secondary</div>
        <div className="hf-button-secondary hover">.hf-button-secondary.hover</div>
    </div>
    <div className="button-group">
        <div className="hf-button-info">.hf-button-info</div>
        <div className="hf-button-info hover">.hf-button-info.hover</div>
    </div>
    <div className="button-group">
        <div className="hf-button-success">.hf-button-success</div>
        <div className="hf-button-success hover">.hf-button-success.hover</div>
    </div>
    <div className="button-group">
        <div className="hf-button-danger">.hf-button-danger</div>
        <div className="hf-button-danger hover">.hf-button-danger.hover</div>
    </div>
</div>

Radio Color

Result

Loading...

Live Editor

<div className="example-block">
    <div className="radio-wrapper">
        <div className="radio-group">
            <div className="hf-radio-green">
                <input id="testradio1" type="radio" name="name" value="value" disabled />
            </div>
            <div className="hf-radio-green highlight">
                <input id="testradio2" type="radio" name="name1" value="value" checked readOnly />
            </div>
        </div>
        <div className="radio-group">
            <div className="hf-radio-lightGreen">
                <input id="testradio3" type="radio" name="name" value="value" disabled />
            </div>
            <div className="hf-radio-lightGreen highlight">
                <input id="testradio4" type="radio" name="name2" value="value" checked readOnly />
            </div>
        </div>
        <div className="radio-group">
            <div className="hf-radio-yellow">
                <input id="testradio5" type="radio" name="name" value="value" disabled />
            </div>
            <div className="hf-radio-yellow highlight">
                <input id="testradio6" type="radio" name="name3" value="value" checked readOnly />
            </div>
        </div>
        <div className="radio-group">
            <div className="hf-radio-orange">
                <input id="testradio7" type="radio" name="name" value="value" disabled />
            </div>
            <div className="hf-radio-orange highlight">
                <input id="testradio8" type="radio" name="name4" value="value" checked readOnly />
            </div>
        </div>
        <div className="radio-group">
            <div className="hf-radio-red">
                <input id="testradio9" type="radio" name="name" value="value" disabled />
            </div>
            <div className="hf-radio-red highlight">
                <input id="testradio10" type="radio" name="name5" value="value" checked readOnly />
            </div>
        </div>
        <div className="radio-group">
            <div className="hf-radio-grey">
                <input id="testradio11" type="radio" name="name" value="value" disabled />
            </div>
            <div className="hf-radio-grey highlight">
                <input id="testradio12" type="radio" name="name6" value="value" checked readOnly />
            </div>
        </div>
    </div>
</div>