Color

Use color utilities to quickly style the text and background color of an element. Great for container, buttons, or any other element. Below, you can find how to style text color, background, buttons, or radio buttons.

Text Color

<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

<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

<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 Button Color

<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>