CSS Customization Reference
Custom CSS is available on Pro and Enterprise plans.
Add CSS in the Builder's "Custom CSS" field to override default widget styles.
All classes are prefixed with sd- to avoid conflicts.
Tip: Widgets render inside iframes, so your custom CSS only affects the widget — not your page.
Use your browser's DevTools to inspect the widget iframe and discover the exact classes to target.
Jump to:
School Info Card
District Info Card
Ranking Badge
Test Score Chart
Top Schools List
Nearby Schools Map
School Finder
School Autocomplete
District Autocomplete
School Info Card
Class Description
.sd-school-cardMain card container — controls padding, border, background, max-width .sd-school-nameSchool name heading .sd-school-metaFlex container for metadata items (grades, type) .sd-meta-itemIndividual metadata badge .sd-school-addressAddress text .sd-school-phonePhone number text .sd-school-rankingRanking section with stars and rank text .sd-starsStar rating container .sd-rank-textRank description text (e.g. "#125 of 5,234") .sd-brandingSchoolDigger attribution footer
Example
/* Make the card stand out */
.sd-school-card {
border: 2px solid #2196f3;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
/* Custom school name color */
.sd-school-name {
color: #d32f2f;
font-size: 1.4em;
}
District Info Card
Class Description
.sd-district-cardMain card container .sd-district-nameDistrict name heading .sd-district-metaFlex container for metadata items .sd-meta-itemIndividual metadata badge .sd-district-addressAddress text .sd-district-phonePhone number text .sd-school-countsContainer for school count statistics .sd-count-itemIndividual count display (Elementary, Middle, etc.) .sd-count-valueCount number .sd-count-labelCount label text .sd-district-rankingDistrict ranking section .sd-starsStar rating container .sd-rank-textRank description text .sd-brandingSchoolDigger attribution footer
Ranking Badge
The Ranking Badge has three display styles: badge (default), ribbon , and minimal . Each has its own set of classes.
Class Description
.sd-badge-containerOuter wrapper for all badge styles Badge style .sd-badgeStandard bordered badge container .sd-badge .sd-rank-numberLarge rank number .sd-badge .sd-rank-contextContext text ("of X in State") Ribbon style .sd-ribbon-wrapperRibbon outer wrapper .sd-ribbonRibbon banner (primary color background) .sd-ribbon .sd-rank-numberLarge rank number (white text) .sd-ribbon .sd-rank-contextContext text Minimal style .sd-minimalCompact inline badge .sd-minimal .sd-rank-textInline rank text Shared .sd-starsStar rating container .sd-brandingSchoolDigger attribution footer
Example
/* Custom badge border */
.sd-badge {
border-color: #ff9800;
border-width: 3px;
border-radius: 16px;
}
Test Score Chart
Class Description
.sd-chart-containerMain chart container .sd-chart-headerHeader section .sd-chart-titleChart title text .sd-chart-subtitleChart subtitle text .sd-filtersFilter controls container .sd-filter-selectFilter dropdown .sd-filter-labelFilter label .sd-filter-groupFilter group wrapper .sd-chart-wrapperCanvas/chart area wrapper .sd-legendChart legend container .sd-legend-itemIndividual legend entry .sd-legend-colorLegend color swatch .sd-no-dataNo data available message .sd-chart-infoChart info/filter summary text .sd-brandingSchoolDigger attribution footer
Top Schools List
Class Description
.sd-top-schoolsMain container .sd-headerHeader section .sd-titleList title .sd-subtitleList subtitle (state name) .sd-school-listScrollable list container .sd-school-itemIndividual school row (clickable) .sd-rank-badgeCircular rank number badge .sd-rank-badge.sd-top-3Gold gradient badge for top 3 schools .sd-school-infoSchool details section within a row .sd-school-nameSchool name text .sd-school-locationCity, State text .sd-school-metaStars and percentage row .sd-starsStar rating container .sd-percentageRanking percentage text .sd-emptyEmpty state message .sd-brandingSchoolDigger attribution footer
Example
/* Alternate row colors */
.sd-school-item:nth-child(even) {
background-color: #f5f5f5;
}
/* Bigger rank badges */
.sd-rank-badge {
width: 44px;
height: 44px;
font-size: 16px;
}
Nearby Schools Map
Class Description
.sd-map-widgetMain widget container (border, overflow) .sd-map-containerMap canvas area .sd-map-loadingLoading overlay .sd-spinnerLoading spinner .sd-map-errorError message overlay .sd-map-error-iconError icon .sd-map-error-messageError message text Popup (on marker click) .sd-popupPopup content wrapper .sd-popup-nameSchool name in popup .sd-popup-levelSchool level text .sd-popup-addressAddress in popup .sd-popup-gradesGrade range in popup .sd-popup-starsStars in popup .sd-starIndividual star icon .sd-star.emptyEmpty/unfilled star .sd-popup-distanceDistance text .sd-popup-linkSchoolDigger link in popup Map controls .sd-reload-btnReload/refresh button (shown after panning) .sd-map-legendMap legend box .sd-legend-titleLegend title .sd-legend-itemLegend row .sd-legend-dotLegend color indicator .sd-brandingSchoolDigger attribution footer
School Finder
Class Description
.sd-finderMain container .sd-finder-headerHeader section .sd-finder-titleTitle text .sd-finder-subtitleSubtitle text Search form .sd-search-formForm wrapper .sd-form-rowForm row (flex container) .sd-inputText input fields .sd-input-smallSmall input (e.g. state) .sd-input-zipZIP code input .sd-filtersFilter controls row .sd-filter-selectFilter dropdown .sd-search-btnSearch button Results .sd-resultsResults section .sd-results-headerResults count text .sd-results-listResults list wrapper .sd-school-itemIndividual school result row .sd-school-rankRank column .sd-school-starsStar rating text .sd-school-rank-numRank number .sd-school-infoSchool details column .sd-school-nameSchool name .sd-school-metaSchool metadata .sd-school-distanceDistance column .sd-view-all-btn"View all results" button .sd-no-resultsNo results message .sd-brandingSchoolDigger attribution footer
School Autocomplete
Class Description
.sd-autocompleteMain container .sd-search-inputSearch text input .sd-resultsResults dropdown container .sd-result-itemIndividual result row .sd-result-nameResult name text .sd-result-metaResult metadata (city, state, grades) .sd-no-resultsNo results message .sd-selectedSelected item display .sd-selected-infoSelected item details .sd-selected-nameSelected item name .sd-selected-metaSelected item metadata .sd-clear-btnClear selection button .sd-brandingSchoolDigger attribution footer
District Autocomplete
Uses the same class names as School Autocomplete .
Class Description
.sd-autocompleteMain container .sd-search-inputSearch text input .sd-resultsResults dropdown container .sd-result-itemIndividual result row .sd-result-nameResult name text .sd-result-metaResult metadata .sd-selectedSelected item display .sd-clear-btnClear selection button .sd-brandingSchoolDigger attribution footer
Common Classes
These classes appear across multiple widgets.
Class Description Used in
.sd-brandingAttribution footer All widgets .sd-starsStar rating container Info Cards, Ranking Badge, Top Schools, Finder .sd-school-nameSchool name text Info Card, Top Schools, Finder .sd-school-itemClickable school row Top Schools, Finder .sd-meta-itemMetadata badge Info Cards .sd-spinnerLoading spinner Map, Finder, Autocompletes .sd-no-resultsEmpty state message Finder, Autocompletes
Tips
Use your browser's DevTools (F12 ) to inspect the widget iframe and see exact class names and current styles.
Custom CSS is injected after the default styles, so your rules will override them naturally.
To increase specificity without !important, double the class: .sd-school-card.sd-school-card { ... }
The .sd-branding footer is required on Free and Basic plans and cannot be hidden via CSS on those tiers.