Components

Timeline

The timeline provides a chronological list of activities a System Admin or System user has engaged in with constituent accounts.

Basics

The timeline viewer in Neon shows current and past account activity to promote transparency and prompt our users toward action that will help remedy their constituent's accounts or follow up on donations and pledges for their organization. Our users also can see which constituents have made a donation or a pledge while having the ability to filter different types of account activity as well for more tailored results. Icons for each activity type help create specificity for each account engagement.

Expanded View

timeline_1

Default View

timeline_2

Loading

timeline_3 
.label {
font-family: Lato-Bold;
font-size: 14px;
color: #002D41;
letter-spacing: 0;
text-align: left;
line-height: 17px;
}

.link_base {
font-family: Lato-Bold;
font-size: 13px;
color: #0074D9;
letter-spacing: 0;
text-align: left;
line-height: 20px;
}

.section_dividers {
border: 1px dashed #54698D;
}

.time_marker {
font-family: Lato-Regular;
font-size: 12px;
color: #54698D;
letter-spacing: 0;
text-align: right;
}

.caret_down {
font-family: "Font Awesome 5 Solid";
}

.activity_description_text {
font-family: Lato-Regular;
font-size: 13px;
color: #3C4144;
}

.from_span {
font-family: .SFNSText;
font-size: 13px;
color: #54698D;
letter-spacing: 0;
text-align: left;
}

.to_span {
font-family: .SFNSText;
font-size: 13px;
color: #54698D;
letter-spacing: 0;
text-align: left;
}

.constituent_link {
font-family: .SFNSText;
font-size: 13px;
color: #0070D2;
letter-spacing: 0;
}

.icon_button {
font-family: "Font Awesome 5 Solid";
background: #0074D9;
border: 1px solid #0074D9;
height: 24px;
width: 24px;
}

.timeline_line {
border: solid 1px #0074D9;
}

Overview of CSS Classes

Selector
Summary
Parent Selector

coming soon

coming soonÂ