Branding and colors
.bg-primary
.bg-secondary
.bg-light-brown
.bg-purple
.bg-light
.bg-warning
Gradient Utility
.bg-gradient-purple
.bg-gradient-red
<div class="bg-pattern">
<div class="overlay-red overlay-red-2">
</div>
<div class="overlay-red overlay-red-3">
</div>
</div>
Background Pattern
<div class="bg-pattern bg-pattern-1">
<div class="overlay-purple">
</div>
<div class="overlay-red overlay-red-1">
</div>
</div>
<div class="bg-pattern bg-pattern-2">
<div class="overlay-purple">
</div>
<div class="overlay-red overlay-red-1">
</div>
</div>
<div class="bg-pattern bg-pattern-3">
<div class="overlay-purple">
</div>
<div class="overlay-red overlay-red-1">
</div>
</div>
<div class="bg-pattern bg-pattern-4">
<div class="overlay-purple">
</div>
</div>
<div class="bg-pattern bg-pattern-5">
<div class="overlay-purple">
</div>
</div>
<div class="bg-pattern bg-pattern-1">
<div class="overlay-purple">
</div>
</div>
<div class="bg-pattern bg-pattern-1">
<div class="overlay-purple">
</div>
</div>
Text Colors
Text Primary .text-primary
Text Secondary .text-secondary
Text Light Brown .text-light-brown
Text Purple .text-purple
Text White .text-white
Text Black .text-black
Text Light .text-light
Typography
H1 – Lorem ipsum
Desktop(lg/xl) – 121.98px/134.18px Tablet(sm/md) – 99.95px/100.75px Mobile(xs) – 56px/56px
H2 – Lorem ipsum dolor sit amet
Desktop(lg/xl) – 75.39px/79.16px Tablet(sm/md) – 59.3px/62.26px Mobile(xs) – 36px/37.8px
H3 – Lorem ipsum dolor sit amet
Desktop(lg/xl) – 46.59px/51.25px Tablet(sm/md) – 36.65px/40.32px Mobile(xs) – 24px/26.4px
H4 – Lorem ipsum dolor sit amet
Desktop(lg/xl) – 28.8px/31.68px Tablet(sm/md) – 22.65px/24.92px Mobile(xs) – 19px/20.9px
P1 – Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate consequuntur at molestiae quibusdam pariatur, nam earum reiciendis incidunt. Voluptatem, placeat!
Desktop(lg/xl) – 17.8px/23.14px Tablet(sm/md) – 14px/18.2px Mobile(xs) – 14px/18.2px
P2 – Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate consequuntur at molestiae quibusdam pariatur, nam earum reiciendis incidunt. Voluptatem, placeat!
Desktop(lg/xl) – 12px/15.6px Tablet(sm/md) – 10px/13px Mobile(xs) – 12px/15.6px
B1 – LOREM IPSUM
Desktop(lg/xl) – 11px/11px Tablet(sm/md) – 14px/14px Mobile(xs) – 12px/12px
Body
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam odio magnam doloribus nesciunt sunt obcaecati rem temporibus ipsa consequuntur eos optio, rerum, ab enim, dignissimos libero! Laboriosam cumque ipsam eos?
Desktop(lg/xl) – 28.8px/31.68px Tablet(sm/md) – 22.65px/24.92px Mobile(xs) – 19px/20.9px
Inline text elements
You can use the mark tag to highlight text.
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
This line of text is meant to be treated as no longer accurate.
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
This line of text will render as underlined
<p><u>This line of text will render as underlined</u></p>
This line of text is meant to be treated as fine print.
<p><small>This line of text is meant to be treated as fine print.</small></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
- Build emotional connections with target audiences through behavioral science, ethnographically informed research, and strategic communications practices.
- Leverage messaging architecture and narrative development for effective positioning amongst desirable audiences.
- Elevate brand awareness and build thought leadership through public relations.
- 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.
Through the Lexicon Project™, we invite organizations into the deep exploration of developing and operationalizing language and narratives that translate to effective and culturally competent communications with key audiences.
As communications experts, we know the role language plays in advancing systemic bias, or creating actions toward equity. It is important to develop shared language, as organizations journey towards building ecosystems rooted in Justice, Equity, Diversity and Inclusion (JEDI)
Links
<span class="link link-primary"></span>
<span class="link link-light"></span>
Reusable Components
Button Primary
<a href="#" class="btn btn-primary">Button Primary
</a>
Button Outline
<a href="#" class="btn btn-primary-outline">Button primary outline</a>
Submit
<a href="#" class="btn btn-primary-outline">Button primary outline</a>
Submitted
<a href="#" class="btn btn-primary-outline">Button primary outline</a>
Dissabled
<a href="#" class="btn btn-primary-outline">Button primary outline</a>
Form Control
<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>
<div class="col-md-5 mb-5">
<input type="text" class="form-control" placeholder="Position" />
</div>
<div class="col-md-5 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">
<div class="form-group">
<input type="submit" class="btn btn-orr-blue" />
</div>
</div>
</div>
</form>
Grid Information
|
xs <576px |
sm ≥576px |
md ≥768px |
lg ≥992px |
xl ≥1200px |
xxl ≥1400px |
|
|---|---|---|---|---|---|---|
Container max-width |
None (auto) | None (auto) | None (auto) | 1040px | 1140px | 1312px |
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| # of columns | 12 | |||||
| Gutter width | 1.5rem (.75rem on left and right) | |||||