Branding and colors

Primary $primary #F7B69D .bg-primary
Light Peach $lightpeach #FDD4C4 .bg-lightpeach
Coral $coral #DA6057 .bg-coral
Secondary $secondary #434343 .bg-secondary
Mauve $mauve #B36D7A .bg-mauve
Sky Blue $skyblue #A5C9CC .bg-skyblue
Blue $blue #1E4D9A .bg-blue
Deep Green $deepgreen #072F2A .bg-deepgreen
Burgundy $burgundy #8B2C3A .bg-burgundy
Black $black #000000 .bg-black
White $white #FFFFFF .bg-white
Green(Success) $success #395853 .bg-success
Beige $beige #FAF6EA .bg-beige
Sand $sand #DCA883 .bg-sand
Dark Sand $darksand #D49A70 .bg-darksand
Dark Mauve $darkmauve #B16170 .bg-darkmauve
Dark Sky Blue $darkskyblue #93C3C7 .bg-darkskyblue
Dark Blue $darkblue #0D3F92 .bg-darkblue
Light Grey $lightgrey #E4E0DE .bg-lightgrey
Crimson $crimson #DC5F53 .bg-crimson
Dark Crimson $darkcrimson #d85643 .bg-darkcrimson
Cyan Blue $cyanblue #374762 .bg-cyanblue
Dark Cyan Blue $darkcyanblue #2e3d56 .bg-darkcyanblue

Text Colors

Text Beige .text-beige
Text White .text-white
Text Primary (Peach) .text-primary
Text Sand .text-sand
Text Dark Mauve .text-darkmauve
Text Light Grey .text-lightgrey
Text crimson .text-crimson
Text Dark crimson .text-darkcrimson
Text Deep Green .text-deepgreen
Text Secondary (Off Black) .text-offblack
Text Success (Green) .text-success
Text Dark Sand .text-darksand
Text Dark Skyblue .text-darkskyblue
Text Dark Blue .text-darkblue
Text Cyan Blue .text-cyanblue
Text Dark Cyan Blue .text-darkcyanblue

Typography

h0 - Heading 0

1600px (XL): 113px
320px (XS): 46px
Letter Spacing: -0.02em (all breakpoints) Line Height: 120%

h1 - Heading 1

1600px (XL): 66px
320px (XS): 32px
Letter Spacing: -0.02em (all breakpoints) Line Height: 120%

h2 - Heading 2

1600px (XL): 46px
320px (XS): 25px
Letter Spacing: -0.02em (all breakpoints) Line Height: 120%

h3 - Heading 3

1600px (XL): 32px
320px (XS): 20px
Letter Spacing: -0.02em (all breakpoints) Line Height: 120%

h4 - Heading 4

1600px (XL): 26px
320px (XS): 18px
Letter Spacing: -0.02em (all breakpoints) Line Height: 130%

h5 - Heading 5

1600px (XL): 22px
320px (XS): 16px
Letter Spacing: -0.02em (all breakpoints) Line Height: 130%

P1

1600px (XL): 22px
320px (XS): 16px
Line Height: 140%(XL) / 130%(XS)

P2

1600px (XL): 18px
320px (XS): 14px
Line Height: 140%(XL) / 130%(XS)


Inline text elements

This line of text will render as underlined

<p><u>This line of text will render as underlined</u></p>

This line rendered as bold text.

<p><strong>This line rendered as bold text.</strong></p>

This line rendered as italicized text.

<p><em>This line rendered as italicized text.</em></p>

Lists
  • Engage with government and community partners to identify high-priority opportunities to address local needs and racial equity.
  • Design scopes of work with clearly articulated goals for executive fellows to pursue while they are embedded full-time for at least 12-months at the senior levels of local government agencies.
  • Ensure that all projects have plans for long-term, community-based sustainability of progress after the fellowships conclude.

Normal Paragraphs

FUSE partners with local governments and communities to create projects that advance racial equity and accelerate systems change across six issue areas: affordable housing, climate resilience, educational access, public health, justice reform, and workforce development. We embed experienced professionals from the private and social sectors to lead these year-long projects.

Consectetur adipisicing elit. Mollitia, voluptate dolor architecto excepturi adipisci pariatur laboriosam quos quo nulla? Ab vero temporibus animi voluptatibus dicta vitae possimus eveniet aliquam quam molestiae, dolores sapiente reiciendis error vel incidunt soluta nesciunt recusandae necessitatibus, quasi maxime, voluptatum esse sint autem excepturi. Nihil, blanditiis.

Learn More About Our Model

Icons

<i class="icon-user"></i>
<i class="icon-twitter"></i>
<i class="icon-youtube"></i>
<i class="icon-save-fill"></i>
<i class="icon-email"></i>
<i class="icon-play"></i>
<i class="icon-arrow-down"></i>
<i class="icon-arrow-dx"></i>
<i class="icon-arrow-sx"></i>
<i class="icon-arrow-up"></i>
<i class="icon-check"></i>
<i class="icon-close"></i>
<i class="icon-enlarge"></i>
<i class="icon-enlarge-rtl"></i>
<i class="icon-facebook"></i>
<i class="icon-instagram"></i>
<i class="icon-menu"></i>
<i class="icon-minus"></i>
<i class="icon-plus"></i>
<i class="icon-saved"></i>
<i class="icon-search"></i>
<i class="icon-search-rtl"></i>
<i class="icon-share"></i>
<i class="icon-share-rtl"></i>
<i class="icon-tiktok"></i>

Reusable Components

Buttons
                                            
                                                <a href="#" class="btn btn-primary" title="CTA">CTA Primary</a>
                                            
                                        
                                            
                                                <a href="#" class="btn btn-beige" title="CTA">CTA Beige</a>
                                            
                                        
                                            
                                                <a href="#" class="btn btn-burgundy" title="CTA">CTA Burgundy</a>
                                            
                                        
                                            
                                                <a href="#" class="btn btn-deepgreen" title="CTA">CTA Deep Green</a>
                                            
                                        
                                            
                                                <a href="#" class="btn btn-lightpeach" title="CTA">CTA Beige</a>
                                            
                                        
                                            
                                                <a href="#" class="btn btn-outline-deepgreen" title="CTA">CTA Outline Deep Green</a>
                                            
                                        
                                            
                                                <a href="#" class="btn btn-outline-success" title="CTA">CTA Outline Success</a>
                                            
                                        
                                            
                                                <a href="#" class="btn btn-outline-lightpeach" title="CTA">CTA Outline lightpeach</a>
                                            
                                        
                                            
                                                <a href="#" class="btn btn-outline-beige" title="CTA">CTA Outline beige</a>
                                            
                                        
CTA Option 1
See all (Option 1)
                                            
                                                <a href="#" class="cta cta--option-1" title="Title here">See all (Option 1)</a>
                                            
                                        
CTA Option 2
Body and self acceptance (Option 2)
                                            
                                                <a href="#" class="cta cta--option-2" title="Title here">Body and self acceptance (Option 2)</a>
                                            
                                        
Link underlined
Link underlined
                                            
                                                <a href="#" class="cta--link link-underlined" title="Title here">Link underlined</a>
                                            
                                        
Pull Quote
Jessica Sprengle, an Austin-based therapist who specializes in eating disorders and body image issues, finds herself talking more and more with her clients about TikTok. Sprengle remembered one post in particular that a client recently sent her.
                                        
                                            <blockquote>
    Jessica Sprengle, an Austin-based therapist who specializes in eating disorders and body image issues, finds herself
    talking more and more with her clients about TikTok. Sprengle remembered one post in particular that a client
    recently sent her.
</blockquote>
Pull Quote

No two bodies are alike and very few bodies look like the ideal we've been sold. It's the same case with our vulvas.

                                        
                                            <figure class="wp-block-pullquote">
    <blockquote>
        <p>
            No two bodies are alike and very few bodies look like the ideal we've been sold. It's the same case with our
            vulvas.
        </p>
    </blockquote>
</figure>
Accordion

Bacterial Vaginosis is the most common cause of abnormal vaginal discharge in women of reproductive age. Bacterial vaginosis, also known as BV, is twice as common as thrush, and as many as one third of women will experience it at some point.

Symptoms: BV often causes an unpleasant odor. However, around half of women with bacterial vaginosis don't have any symptoms whatsoever. For the other half, many mistake their symptoms for thrush, leading to incorrect treatment and frustration when it keeps reoccurring. The main symptom of BV is a thin, watery discharge that is often grey in color and can have a fishy odor, especially after sex or during a period.

Bacterial Vaginosis is the most common cause of abnormal vaginal discharge in women of reproductive age. Bacterial vaginosis, also known as BV, is twice as common as thrush, and as many as one third of women will experience it at some point.

Symptoms: BV often causes an unpleasant odor. However, around half of women with bacterial vaginosis don't have any symptoms whatsoever. For the other half, many mistake their symptoms for thrush, leading to incorrect treatment and frustration when it keeps reoccurring. The main symptom of BV is a thin, watery discharge that is often grey in color and can have a fishy odor, especially after sex or during a period.

Bacterial Vaginosis is the most common cause of abnormal vaginal discharge in women of reproductive age. Bacterial vaginosis, also known as BV, is twice as common as thrush, and as many as one third of women will experience it at some point.

Symptoms: BV often causes an unpleasant odor. However, around half of women with bacterial vaginosis don't have any symptoms whatsoever. For the other half, many mistake their symptoms for thrush, leading to incorrect treatment and frustration when it keeps reoccurring. The main symptom of BV is a thin, watery discharge that is often grey in color and can have a fishy odor, especially after sex or during a period.

                                        
                                            <div class="accordion accordion-generic" id="accordionExample">
    <div class="accordion-item">
        <h3 class="accordion-header mb-0 pb-2" id="headingOne">
            <button
                class="h3 font-heading-normal accordion-button mb-0"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#collapseOne"
                aria-expanded="true"
                aria-controls="collapseOne"
            >
                Accordion Item #1
            </button>
        </h3>
        <div
            id="collapseOne"
            class="accordion-collapse collapse show"
            aria-labelledby="headingOne"
            data-bs-parent="#accordionExample"
        >
            <div class="accordion-body text-success px-0 pt-0 pb-6 pb-md-8">
                <p>
                    Bacterial Vaginosis is the most common cause of abnormal vaginal discharge in women of reproductive
                    age. Bacterial vaginosis, also known as BV, is twice as common as thrush, and as many as one third
                    of women will experience it at some point.
                </p>
                <p>
                    <strong>Symptoms:</strong> BV often causes an unpleasant odor. However, around half of women with
                    bacterial vaginosis don't have any symptoms whatsoever. For the other half, many mistake their
                    symptoms for thrush, leading to incorrect treatment and frustration when it keeps reoccurring. The
                    main symptom of BV is a thin, watery discharge that is often grey in color and can have a fishy
                    odor, especially after sex or during a period.
                </p>
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h3 class="accordion-header" id="headingTwo">
            <button
                class="h3 font-heading-normal accordion-button mb-0 collapsed"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#collapseTwo"
                aria-expanded="false"
                aria-controls="collapseTwo"
            >
                Accordion Item #2
            </button>
        </h3>
        <div
            id="collapseTwo"
            class="accordion-collapse collapse"
            aria-labelledby="headingTwo"
            data-bs-parent="#accordionExample"
        >
            <div class="accordion-body text-success px-0 pt-0 pb-6 pb-md-8">
                <p>
                    Bacterial Vaginosis is the most common cause of abnormal vaginal discharge in women of reproductive
                    age. Bacterial vaginosis, also known as BV, is twice as common as thrush, and as many as one third
                    of women will experience it at some point.
                </p>
                <p>
                    <strong>Symptoms:</strong> BV often causes an unpleasant odor. However, around half of women with
                    bacterial vaginosis don't have any symptoms whatsoever. For the other half, many mistake their
                    symptoms for thrush, leading to incorrect treatment and frustration when it keeps reoccurring. The
                    main symptom of BV is a thin, watery discharge that is often grey in color and can have a fishy
                    odor, especially after sex or during a period.
                </p>
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h3 class="accordion-header" id="headingThree">
            <button
                class="h3 font-heading-normal accordion-button mb-0 collapsed"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#collapseThree"
                aria-expanded="false"
                aria-controls="collapseThree"
            >
                Accordion Item #3
            </button>
        </h3>
        <div
            id="collapseThree"
            class="accordion-collapse collapse"
            aria-labelledby="headingThree"
            data-bs-parent="#accordionExample"
        >
            <div class="accordion-body text-success px-0 pt-0 pb-6 pb-md-8">
                <p>
                    Bacterial Vaginosis is the most common cause of abnormal vaginal discharge in women of reproductive
                    age. Bacterial vaginosis, also known as BV, is twice as common as thrush, and as many as one third
                    of women will experience it at some point.
                </p>
                <p>
                    <strong>Symptoms:</strong> BV often causes an unpleasant odor. However, around half of women with
                    bacterial vaginosis don't have any symptoms whatsoever. For the other half, many mistake their
                    symptoms for thrush, leading to incorrect treatment and frustration when it keeps reoccurring. The
                    main symptom of BV is a thin, watery discharge that is often grey in color and can have a fishy
                    odor, especially after sex or during a period.
                </p>
            </div>
        </div>
    </div>
</div>

Form Control

Default Skin
                                                
                                                    <form class="wpcf7-form init wpcf7-acceptance-as-validation">
    <div class="row">
        <div class="col-md-5 mb-5">
            <input type="text" class="form-control" placeholder="Name" />
            <div
                data-lastpass-icon-root="true"
                style="
                    position: relative !important;
                    height: 0px !important;
                    width: 0px !important;
                    float: left !important;
                "
            ></div>
        </div>
        <div class="col-md-5 mb-5"><input type="text" class="form-control" placeholder="Position" /></div>
        <div class="col-md-5 mb-5">
            <input type="text" class="form-control wpcf7-not-valid" placeholder="Organization" />
        </div>
        <div class="col-md-5 mb-5">
            <input type="text" class="form-control wpcf7-not-valid" placeholder="Annual Operating Budget" />
        </div>
        <div class="col-md-10 mb-5">
            <div class="custom-select">
                <select aria-label="Default select example">
                    <option>Popular topics</option>
                    <option>Topic Lorem ipsum</option>
                    <option>Assumenda commodi, voluptates</option>
                    <option>Consectetur adipisicing</option>
                    <option>soluta provident</option>
                </select>
            </div>
        </div>
        <div class="col-md-10 mb-5">
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Message"></textarea>
        </div>
        <div class="col-md-10 mb-5">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" />
                <label class="form-check-label" for="flexCheckDefault">Default checkbox</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked="checked" />
                <label class="form-check-label" for="flexCheckChecked">Checked checkbox</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1" />
                <label class="form-check-label" for="flexRadioDefault1"> Default radio </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked />
                <label class="form-check-label" for="flexRadioDefault2"> Default checked radio </label>
            </div>
        </div>
        <div class="col-md-10">
            <div class="form-group"><input type="submit" class="btn btn-primary" /></div>
        </div>
    </div>
</form>

Form Control

Dark Skin
                                                
                                                    <form class="wpcf7-form init wpcf7-acceptance-as-validation">
    <div class="row">
        <div class="col-md-5 mb-5">
            <input type="text" class="form-control" placeholder="Name" />
            <div
                data-lastpass-icon-root="true"
                style="
                    position: relative !important;
                    height: 0px !important;
                    width: 0px !important;
                    float: left !important;
                "
            ></div>
        </div>
        <div class="col-md-5 mb-5"><input type="text" class="form-control" placeholder="Position" /></div>
        <div class="col-md-5 mb-5">
            <input type="text" class="form-control wpcf7-not-valid" placeholder="Organization" />
        </div>
        <div class="col-md-5 mb-5">
            <input type="text" class="form-control wpcf7-not-valid" placeholder="Annual Operating Budget" />
        </div>
        <div class="col-md-10 mb-5">
            <div class="custom-select">
                <select aria-label="Default select example">
                    <option>Popular topics</option>
                    <option>Topic Lorem ipsum</option>
                    <option>Assumenda commodi, voluptates</option>
                    <option>Consectetur adipisicing</option>
                    <option>soluta provident</option>
                </select>
            </div>
        </div>
        <div class="col-md-10 mb-5">
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Message"></textarea>
        </div>
        <div class="col-md-10 mb-5">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" />
                <label class="form-check-label" for="flexCheckDefault">Default checkbox</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked="checked" />
                <label class="form-check-label" for="flexCheckChecked">Checked checkbox</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1" />
                <label class="form-check-label" for="flexRadioDefault1"> Default radio </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked />
                <label class="form-check-label" for="flexRadioDefault2"> Default checked radio </label>
            </div>
        </div>
        <div class="col-md-10">
            <div class="form-group"><input type="submit" class="btn btn-primary" /></div>
        </div>
    </div>
</form>