Components - Content cards

<div class="row">
    <div class="col-md-4">
        <!-- Content card (Title + Description + View More button) -->
        <div class="content-card centered-card">
            <div class="text-center">
                <i class="fa fa-envira content-card-icon" aria-hidden="true"></i>
            </div>
            <h2 class="content-card-title text-center">
                Our philosophy
            </h2>
            <p class="content-card-description">
                Tezos limited a quick all-time-high of lots of whitepaper! Cardano could be many technical analysis since Nexo data mining a fundamental analysis.
            </p>
            <div class="text-center">
                <a href="#"
                   class="content-card-button">
                    View more
                </a>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <!-- Content card (Title + Description + View More button) -->
        <div class="content-card centered-card">
            <div class="text-center">
                <i class="fa fa-bolt content-card-icon" aria-hidden="true"></i>
            </div>
            <h2 class="content-card-title text-center">
                Our data
            </h2>
            <p class="content-card-description">
                Ravencoin generates a amazing fish of lots of market cap, and Waves serves many quick anti-money laundering! Solidity allowed lots of fast peer-to-peer network.
            </p>
            <div class="text-center">
                <a href="#"
                   class="content-card-button">
                    View more
                </a>
            </div>
        </div>
    </div>
</div>

/* Class used to center the content within the card */
.centered-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
/* Content Card
   ========================================================================== */
.content-card {
	background-color: var(--boxes-background);
	padding: 26px;
	border-radius: 4px;
	margin-bottom: 20px;
	height: 100%;
}
.content-card-title {
	color: var(--titles);
	font-size: 1.2rem;
	line-height: 1.5;
	font-weight: normal;
	margin-top: 0;
	margin-bottom: 13px;
	max-width: 100%;
}
.content-card-description {
	color: var(--text);
	font-size: 1rem;
	line-height: 1.5;
	font-weight: normal;
	margin-top: 0;
	margin-bottom: 26px;
	max-width: 100%;
}
.content-card-icon {
	color: var(--highlight);
	font-size: 2rem;
	margin-bottom: 13px;
	max-width: 100%;
}
.content-card-link {
	color: var(--links);
	font-weight: bold;
	transition: all .2s;
	opacity: 1;
	max-width: 100%;
}
.content-card-link:hover {
	opacity: .7;
	text-decoration: none;
}
.content-card-button {
	color: var(--highlight);
	border: 1px solid var(--highlight);
    background: transparent;
	display: inline-block;
	text-align: center;
	font-size: .867rem;
    border-radius: 4px;
    padding: .5rem 1.15rem;
    text-decoration: none;
    transition: all .2s;
}
.content-card-button:hover {
	background-color: var(--highlight);
	color: #FFFFFF;
	text-decoration: none;
}

<div class="content-card">
    <div class="row">
        <div class="col-sm-6">
            <!-- Replace this widget with your own visualisation -->
            <ods-dataset-context context="countoursgeographiques"
                                 countoursgeographiques-dataset="georef-france-region"
                                 countoursgeographiques-domain="public"
                                 countoursgeographiques-parameters="{}">
                <ods-map context="countoursgeographiques"
                         scroll-wheel-zoom="false"
                         location="6,47.13742,3.69141"
                         basemap="jawg.streets"></ods-map>
            </ods-dataset-context>
        </div>
        <div class="col-sm-6">
            <h2 class="content-card-title">
                France departments
            </h2>
            <p class="content-card-description">
                Cardano could be many technical analysis since Nexo data mining a fundamental analysis.
            </p>
            <p class="content-card-description">
                Ravencoin generates a amazing fish of lots of market cap, and Waves serves many quick anti-money laundering! Solidity allowed lots of fast peer-to-peer network.
            </p>
            <a href="#"
               class="content-card-link">
                En savoir <i class="fa fa-plus fa-fw" aria-hidden="true"></i>
            </a>
        </div>
    </div>
</div>

/* Class used to center the content within the card */
.centered-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
/* Content Card
   ========================================================================== */
.content-card {
	background-color: var(--boxes-background);
	padding: 26px;
	border-radius: 4px;
	margin-bottom: 20px;
	height: 100%;
}
.content-card-title {
	color: var(--titles);
	font-size: 1.2rem;
	line-height: 1.5;
	font-weight: normal;
	margin-top: 0;
	margin-bottom: 13px;
	max-width: 100%;
}
.content-card-description {
	color: var(--text);
	font-size: 1rem;
	line-height: 1.5;
	font-weight: normal;
	margin-top: 0;
	margin-bottom: 26px;
	max-width: 100%;
}
.content-card-icon {
	color: var(--highlight);
	font-size: 2rem;
	margin-bottom: 13px;
	max-width: 100%;
}
.content-card-link {
	color: var(--links);
	font-weight: bold;
	transition: all .2s;
	opacity: 1;
	max-width: 100%;
}
.content-card-link:hover {
	opacity: .7;
	text-decoration: none;
}
.content-card-button {
	color: var(--highlight);
	border: 1px solid var(--highlight);
    background: transparent;
	display: inline-block;
	text-align: center;
	font-size: .867rem;
    border-radius: 4px;
    padding: .5rem 1.15rem;
    text-decoration: none;
    transition: all .2s;
}
.content-card-button:hover {
	background-color: var(--highlight);
	color: #FFFFFF;
	text-decoration: none;
}

<div class="row">
    <div class="col-md-4">
        <!-- Content card -->
        <div class="content-card">
            <h2 class="content-card-title">
                Global university ranking
            </h2>
            <ods-dataset-context context="shangairankinguniversity"
                                 shangairankinguniversity-domain="public"
                                 shangairankinguniversity-dataset="shanghai-world-university-ranking">
                <ods-chart align-month="true">
                    <ods-chart-query context="shangairankinguniversity"
                                     field-x="country"
                                     maxpoints="10"
                                     sort="serie1-1">
                        <ods-chart-serie chart-type="treemap"
                                         function-y="COUNT"
                                         color="range-Paired"
                                         scientific-display="true">
                        </ods-chart-serie>
                    </ods-chart-query>
                </ods-chart>
            </ods-dataset-context>
        </div>
    </div>
    <div class="col-md-8">
        <!-- Content card -->
        <div class="content-card">
            <h2 class="content-card-title">
                Ranking on a map
            </h2>
            <ods-dataset-context context="rankingmap"
                                 rankingmap-domain="public"
                                 rankingmap-dataset="shanghai-world-university-ranking">
                <ods-map no-refit="true"
                         scroll-wheel-zoom="false"
                         display-control="false"
                         search-box="false"
                         toolbar-fullscreen="false"
                         toolbar-geolocation="true"
                         basemap="jawg.streets"
                         location="2,31.31678,4.10444"
                         display-legend="false">
                    <ods-map-layer-group>
                        <ods-map-layer context="rankingmap"
                                       color-numeric-ranges="{'42.8':'#FC9272','84.6':'#E6755C','126.4':'#D05946','168.2':'#BA3D30','210.0':'#A5211B'}"
                                       color-numeric-range-min="1"
                                       picto="ods-circle"
                                       show-marker="true"
                                       display="choropleth"
                                       function="COUNT"
                                       shape-opacity="0.5"
                                       point-opacity="1"
                                       border-color="#FFFFFF"
                                       border-opacity="1"
                                       border-size="1"
                                       border-pattern="solid"
                                       caption="true"
                                       title="Shangai ranking universities since 2003" size="4"></ods-map-layer>
                    </ods-map-layer-group>
                </ods-map>
            </ods-dataset-context>
        </div>
    </div>
</div>

/* Class used to center the content within the card */
.centered-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
/* Content Card
   ========================================================================== */
.content-card {
	background-color: var(--boxes-background);
	padding: 26px;
	border-radius: 4px;
	margin-bottom: 20px;
	height: 100%;
}
.content-card-title {
	color: var(--titles);
	font-size: 1.2rem;
	line-height: 1.5;
	font-weight: normal;
	margin-top: 0;
	margin-bottom: 13px;
	max-width: 100%;
}
.content-card-description {
	color: var(--text);
	font-size: 1rem;
	line-height: 1.5;
	font-weight: normal;
	margin-top: 0;
	margin-bottom: 26px;
	max-width: 100%;
}
.content-card-icon {
	color: var(--highlight);
	font-size: 2rem;
	margin-bottom: 13px;
	max-width: 100%;
}
.content-card-link {
	color: var(--links);
	font-weight: bold;
	transition: all .2s;
	opacity: 1;
	max-width: 100%;
}
.content-card-link:hover {
	opacity: .7;
	text-decoration: none;
}
.content-card-button {
	color: var(--highlight);
	border: 1px solid var(--highlight);
    background: transparent;
	display: inline-block;
	text-align: center;
	font-size: .867rem;
    border-radius: 4px;
    padding: .5rem 1.15rem;
    text-decoration: none;
    transition: all .2s;
}
.content-card-button:hover {
	background-color: var(--highlight);
	color: #FFFFFF;
	text-decoration: none;
}