Widget Tricks - Custom catalog card

The catalog card represents the published datasets of that portal. (see Exploring a dataset from the catalog).

The platform allows to customize the catalog cards displayed in the catalog of the portal, by providing custom HTML and CSS to override the default version. This resource propose different versions and technical tricks that can be used to highlighted datasets by keywords or theme for example.

Default look

The default look & feel of catalog cards for any new Opendatasoft portal.

<ods-catalog-context context="userclub"
                     userclub-domain="userclub"
                     class="catalog-grid">
    <ods-result-enumerator context="userclub" max="4">
        {{ dataset = item ; "" }}
        <!-- Resource starts here, DO NOT COPY before this line -->
        <ods-catalog-card>
            <ods-catalog-card-theme-icon></ods-catalog-card-theme-icon>
            <ods-catalog-card-body>
                <ods-catalog-card-title></ods-catalog-card-title>
                <ods-catalog-card-description></ods-catalog-card-description>
                <div class="ods-catalog-card__metadata">
                    <ods-catalog-card-metadata-item item-title="Publisher" item-key="publisher"></ods-catalog-card-metadata-item>
                    <ods-catalog-card-metadata-item item-title="License" item-key="license"></ods-catalog-card-metadata-item>
                </div>
                <ods-catalog-card-keywords></ods-catalog-card-keywords>
            </ods-catalog-card-body>
            <ods-catalog-card-visualizations></ods-catalog-card-visualizations>
        </ods-catalog-card>
        <!-- Resource ends here -->
    </ods-result-enumerator>
</ods-catalog-context>

Modern Look

Some styling upgrades to the default card to give it a sleeker look.

<ods-catalog-context context="userclub"
                     userclub-domain="userclub"
                     class="catalog-grid">
    <ods-result-enumerator context="userclub" max="4">
        {{ dataset = item ; "" }}
        <!-- Resource starts here, DO NOT COPY before this line -->
        <ods-catalog-card>
            <ods-catalog-card-theme-icon></ods-catalog-card-theme-icon>
            <ods-catalog-card-body>
                <ods-catalog-card-title></ods-catalog-card-title>
                <ods-catalog-card-description></ods-catalog-card-description>
                <div class="ods-catalog-card__metadata">
                    <ods-catalog-card-metadata-item item-title="Publisher" item-key="publisher"></ods-catalog-card-metadata-item>
                    <ods-catalog-card-metadata-item item-title="License" item-key="license"></ods-catalog-card-metadata-item>
                </div>
                <ods-catalog-card-keywords></ods-catalog-card-keywords>
            </ods-catalog-card-body>
            <ods-catalog-card-visualizations></ods-catalog-card-visualizations>
        </ods-catalog-card>
        <!-- Resource ends here -->
    </ods-result-enumerator>
</ods-catalog-context>
/* Explore Page - Catalog Cards
========================================================================== */
.ods-catalog-card {
    border-radius: 4px;
    padding: 26px;
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}
.ods-catalog-card:hover {
    -webkit-box-shadow: 0 0 10px 0 #e3e9f1;
    box-shadow: 0 0 10px 0 #e3e9f1;
}
.ods-catalog-card:hover:before {
    display: none;
}
.ods-catalog-card__theme-icon {
    position: absolute;
    top: 26px;
    left: 26px;
}
.ods-catalog-card__title {
    color: var(--highlight);
    font-weight: 400;
    font-size: 1.44rem;
    line-height: 1.2;
}
.ods-catalog-card__metadata-item {
    font-size: .833rem;
    line-height: 1.4;
    margin-bottom: 4px;
}
.ods-catalog-card__visualization {
    color: var(--text);
    padding: 0 0 4px 0;
}
.ods-catalog-card__keyword {
    color: var(--text);
    font-size: 0.833rem;
    padding: .15rem .35rem;
    background-color: var(--boxes-border);
    border-radius: 7px;
}
.ods-catalog-card__keyword:hover {
    color: #FFFFFF;
    background-color: var(--links);
}

Hidden metrics

Dataset metrics can be viewed by hovering over the catalog card. To learn what other metadata can be displayed in a catalog card, check out the catalog card documentation.

<ods-catalog-context context="userclub"
                     userclub-domain="userclub"
                     class="catalog-grid">
    <ods-result-enumerator context="userclub" max="4">
        {{ dataset = item ; "" }}
        <!-- Resource starts here, DO NOT COPY before this line -->
        <ods-catalog-card>
            <ods-catalog-card-theme-icon></ods-catalog-card-theme-icon>
            <ods-catalog-card-body>
                <ods-catalog-card-title></ods-catalog-card-title>
                <div class="catalog-card-content">
                    <div class="catalog-card-info">
                        <div class="catalog-card-metrics">
                            <div class="catalog-card-metric">
                                <span class="catalog-card-metric-value">
                                    <i class="fa fa-cube" aria-hidden="true"></i>&nbsp;{{ dataset.metas.records_count | siPrefixFormat }}
                                </span>
                                <span> records</span>
                            </div>
                            <div class="catalog-card-metric" ng-if="dataset.extra_metas.explore.popularity_score">
                                <span class="catalog-card-metric-value">
                                    <i class="fa fa-heartbeat" aria-hidden="true"></i>&nbsp;{{ dataset.extra_metas.explore.popularity_score * 10| number }}
                                </span>
                                <span> (popularity score)</span>
                            </div>
                            <div class="catalog-card-metric">
                                <span class="catalog-card-metric-value">
                                    <i class="fa fa-clock-o" aria-hidden="true"></i>&nbsp;{{ dataset.metas.modified | date:"short" }}</span>
                            </div>
                            <div class="catalog-card-metric">
                                <span class="catalog-card-metric-value">
                                    <i class="fa fa-shield" aria-hidden="true"></i>&nbsp;{{ dataset.metas.license }}
                                </span>
                            </div>
                            <div class="catalog-card-metric">
                                <span class="catalog-card-metric-value">
                                    <i class="fa fa-user-circle" aria-hidden="true"></i>&nbsp;{{ dataset.metas.publisher }}
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="catalog-card-description">
                        <ods-catalog-card-description></ods-catalog-card-description>
                    </div>
                </div>
            </ods-catalog-card-body>
            <div class="catalog-card-sidebar">
                <ods-catalog-card-visualizations></ods-catalog-card-visualizations>
                <ods-catalog-card-keywords></ods-catalog-card-keywords>
            </div>
        </ods-catalog-card>
        <!-- Resource ends here -->
    </ods-result-enumerator>
</ods-catalog-context>
/* Explore Page - Catalog Cards */
.ods-catalog-card {
    display: block;
    border-radius: 12px;
    padding: 26px;
    transition: all .2s;
}
@media screen and (min-width: 749px) {
    .ods-catalog-card {
        display: flex;
    }
}
.ods-catalog-card:hover {
    box-shadow: 0 0 10px 0 #e3e9f1;
}
.ods-catalog-card:hover:before {
    display: none;
}
.ods-catalog-card:hover .catalog-card-description {
    opacity: 0;
    top: 30px;
}
.ods-catalog-card:hover .catalog-card-info {
    opacity: 1;
    top: 0;
}
.catalog-card-content {
    position: relative;
}
.catalog-card-info {
    position: absolute;
    top: 30px;
    opacity: 0;
    transition: opacity .3s .1s, top .3s;
}
.catalog-card-metrics {
    font-size: 1rem;
    margin-left: 42px;
    margin-bottom: 1rem;
}
.catalog-card-description {
    min-height: 120px;
    margin-top: .5rem;
    position: relative;
    top: 0;
    left: 0;
    opacity: 1;
    transition: opacity .5s, top .4s;
}
.ods-catalog-card__theme-icon {
    position: absolute;
    top: 26px;
    left: 26px;
}
.ods-catalog-card__title {
    color: var(--titles);
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.2;
    transition: color .3s;
}
.ods-catalog-card:hover .ods-catalog-card__title {
    color: var(--highlight);
}
.ods-catalog-card__metadata-item {
    font-size: .833rem;
    line-height: 1.4;
    margin-bottom: 4px;
}
.ods-catalog-card__visualization {
    color: var(--text);
    padding: 0 0 4px 0;
}
.ods-dataset-visualization__dataset-title-text {
    font-size: 1.5rem;
    line-height: 0rem;
    font-weight: bold;
}
.ods-catalog-card__body {
    width: 100%;
}
@media screen and (min-width: 749px) {
    .ods-catalog-card__body {
        width: calc(100% - 136px);
        padding-right: 5px;
    }
}
@media screen and (min-width: 749px) {
    .ods-catalog-card__visualizations {
        display: flex;
        flex-direction: column;
        border-left: none;
        padding-left: 0;
        margin-left: 0;
    }
}
/* display: none; pour ne pas afficher les mots-clés en mode mobile */
.ods-catalog-card__keywords {
    display: none;
}
@media screen and (min-width: 749px) {
    .ods-catalog-card__keywords {
        display: block;
        margin-left: 0;
        margin-right: 10px;
        padding-right: 10px;
        display: flex;
        flex-direction: column;
    }
}
.catalog-card-sidebar {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    padding-left: 0;
}
@media screen and (min-width: 749px) {
    .catalog-card-sidebar {
        padding-left: 10px;
        flex-direction: column;
        border-left: 1px solid var(--boxes-border);
        width: 136px;
        justify-content: flex-start;
    }
}
@media screen and (min-width: 749px) {
    .ods-catalog-card__visualizations {
        order: 0;
        height: auto;
        border-left: none;
        padding-left: 0;
        margin-left: 0;
    }
}
ods-catalog-card-keywords {
    flex-grow: 1;
}
.ods-catalog-card__keywords {
    width: 100%
}
@media screen and (min-width: 749px) {
    .ods-catalog-card__keywords {
        height: auto;
        margin-top: 10px;
        border-right: none;
    }
}
.ods-catalog-card__keyword {
    color: var(--text);
    font-size: 0.75rem;
    padding: .15rem .35rem;
    background-color: var(--boxes-border);
    border-radius: 7px;
}
.ods-catalog-card__keyword:hover {
    color: #FFFFFF;
}
.ods-catalog-card__visualization-icon {
    text-align: center;
}
.metadata-publisher .ods-catalog-card__metadata-item-label:before {
    content: '\f2bd';
    font-family: 'FontAwesome';
    margin-right: 5px;
}
.metadata-license .ods-catalog-card__metadata-item-label:before {
    content: '\f132';
    font-family: 'FontAwesome';
    margin-right: 5px;
}

Highlight datasets

Highlight datasets by adding visual contents like a picture or logo!

<ods-catalog-context context="userclub"
                     userclub-domain="userclub"
                     class="catalog-grid">
    <ods-result-enumerator context="userclub" max="4">
        {{ dataset = item ; "" }}
        <!-- Resource starts here, DO NOT COPY before this line -->
        <ods-catalog-card class="catalog-highlight"
                          ng-class="{'ods-catalog-card-highlighted' : dataset.metas.keyword.indexOf('Discovery') > -1 }">
            <a ods-main-click=""
               ng-href="{{ '/explore/dataset/' + dataset.datasetid + '/' }}"
               target="_self">
            </a>
            <ods-catalog-card-theme-icon></ods-catalog-card-theme-icon>
            <ods-catalog-card-body>
                <ods-catalog-card-title></ods-catalog-card-title>
                <ods-catalog-card-description></ods-catalog-card-description>
                <ods-catalog-card-keywords></ods-catalog-card-keywords>
                <div class="ods-catalog-card__metadata">
                    <ods-catalog-card-metadata-item item-title="Publisher" item-key="publisher"></ods-catalog-card-metadata-item>
                    <ods-catalog-card-metadata-item item-title="License" item-key="license"></ods-catalog-card-metadata-item>
                </div>
            </ods-catalog-card-body>
            <div class="ods-catalog-card__visualizations">
                <div class="stars">
                    <img ng-repeat="kw in dataset.metas.keyword track by $index"
                         ng-if="kw == 'academy' || kw =='traffic' || kw =='bicycle'"
                         src="https://discovery.opendatasoft.com/assets/theme_image/stared.png" />
                </div>
            </div>
        </ods-catalog-card>
        <!-- Resource ends here -->
    </ods-result-enumerator>
</ods-catalog-context>
/* Catalog Highlight
   ========================================================================== */
ods-catalog-card.catalog-highlight .stars {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
ods-catalog-card.catalog-highlight .stars img {
    height: 35px;
    width: 35px;
    margin: 3px;
}
.ods-catalog-card-highlight .ods-catalog-card {
    border: solid 2px #FFD700;
}

Full custom by ODS Discovery

Watermark, header border color, starred dataset by keyword and publisher, visual changes on hover…

<ods-catalog-context context="userclub"
                     userclub-domain="userclub"
                     class="catalog-grid">
    <ods-result-enumerator context="userclub" max="4">
        {{ dataset = item ; "" }}
        <!-- Resource starts here, DO NOT COPY before this line -->
        <ods-catalog-card>
            <div class="card__title"
                 ng-class="{'card__title--stared' : dataset.metas.keyword.indexOf('Demo') != -1}">
                <h2 ng-bind="dataset.metas.title"></h2>
                <ods-theme-picto theme="{{dataset.metas.theme}}" color="white"></ods-theme-picto>
            </div>
            <div class="card__content">
                <div class="card__description-holder">
                    <p class="card__description" ng-bind-html="dataset.metas.description|shortSummary|prettyText"></p>
                    <div class="starred">
                        <img ng-repeat="kw in dataset.metas.keyword track by $index"
                             ng-if="kw == 'academy' || kw =='traffic' || kw =='bicycle'"
                             src="https://discovery.opendatasoft.com/assets/theme_image/stared.png" />
                    </div>
                </div>
                <div ng-if="dataset.metas.publisher == 'OpenDataSoft'" class="poweredby">
                    Powered by OpenDataSoft
                </div>
                <ods-catalog-card-keywords></ods-catalog-card-keywords>
            </div>
            <a ods-main-click=""
               ng-href="{{ '/explore/dataset/' + dataset.datasetid + '/' }}"
               target="_self">
            </a>
        </ods-catalog-card>
        <!-- Resource ends here -->
    </ods-result-enumerator>
</ods-catalog-context>
/* Full Custom Catalog Cards
   ========================================================================== */
.ods-catalog-card {
    border-radius: 7px;
    padding: 26px;
    flex-direction: column;
    padding: 26px;
    transition: all .2s;
}
.ods-catalog-card:hover {
    background-color: #f5f5f5;
    -webkit-box-shadow: 0 0 10px 0 #e3e9f1;
    box-shadow: 0 0 10px 0 #e3e9f1;
}
.ods-catalog-card .ods-catalog-card:hover:before {
    display: none;
}
.ods-catalog-card .card__title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0;
}
.ods-catalog-card .card__title--starred:before {
    content: '\f005';
    color: #FFD700;
    font-family: FontAwesome;
    font-size: 1.3rem;
    margin-right: 5px;
}
.ods-catalog-card .card__title h2 {
    color: #1e0c33;
    margin-bottom: 0;
    font-weight: 200;
}
.ods-catalog-card .card__description-holder {
    display: flex;
    justify-content: space-between;
}
.ods-catalog-card .card__description {
    padding: 15px;
}
.ods-catalog-card .starred {
    display: flex;
    margin: 10px;
}
.ods-catalog-card .starred img {
    height: 40px;
}
.card__portal-favicon {
    position: absolute;
    bottom: 0px;
    right: 5px;
}
.card__portal-favicon img {
    height: 25px;
    width: 25px;
}
.ods-catalog-card .odswidget.odswidget-picto.odswidget-theme-picto {
    width: 32px;
    height: 32px;
}
.ods-catalog-card .ods-svginliner__svg-container svg path,
.ods-catalog-card .ods-svginliner__svg-container svg rect,
.ods-catalog-card .ods-svginliner__svg-container svg polygon {
    fill: #1e0c33 !important;
}
.ods-catalog-card__keywords {
    margin-left: 20px;
    margin-bottom: 10px;
}
.ods-catalog-card .poweredby {
    transform: rotate(-16deg);
    position: absolute;
    top: 50px;
    left: 50px;
    font-size: 1.8em;
    opacity: 0.5;
    font-weight: 400;
    color: #ec653d;
    text-align: center;
}