26Status Indicator

Colored block with a background image and an icon indicating a generic status of some object. Used on the corps member profile, the corps member journey, and the listing listing pages.

Default styling

Text indicating a status!

.status-indicator--short

Reduces padding and increases icon size

Text indicating a status!

.status-indicator--small

Reduces padding and font size, removes min height

Text indicating a status!

.status-indicator--green

Green background

Text indicating a status!

.status-indicator--red

Red background

Text indicating a status!

.status-indicator--orange

orange background

Text indicating a status!

.status-indicator--blue

Blue background

Text indicating a status!

.status-indicator--alum

CM is an alumni

Text indicating a status!

.status-indicator--joined

CM just joined Service Year

Text indicating a status!

.status-indicator--matched

CM is matched with a position

Text indicating a status!

.status-indicator--searching

CM is searching for a position

Text indicating a status!

.status-indicator--serving

CM is currently serving for a position

Text indicating a status!

Show Markup


<div class="status-indicator [modifier class]">
    <div class="status-indicator__content">
        <svg class="status-indicator__icon svg-icon svg-icon--white" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--pin"></use></svg>
        <p class="mb0">Text indicating a status!</p>
    </div>
</div>