A card for an application e.g. a DesignSafe application button / card.
<div class="container">
<div class="row row-col-stretch-content-y">
<div class="col col-12 col-md-6 col-xl-4">
<div class="c-app-card">
<h3 class="c-app-card__title">
ADCIRC
</h3>
<p class="c-app-card__desc">Widely applied coastal circulation and coastal flooding model.</p>
<ul class="c-app-card__types">
<li>Storm Surge</li>
<li>Hurricane</li>
<li>Flood</li>
</ul>
<ul class="c-app-card__flags">
<li class="c-app-card__other">
<strong>Popular</strong>
</li>
<li class="c-app-card__repo">
Open Source
</li>
</ul>
<a class="c-app-card__link" href="#">magic link</a>
</div>
</div>
<div class="col col-12 col-md-6 col-xl-4">
<div class="c-app-card">
<h3 class="c-app-card__title">
<i class="icon icon-user"></i>
ANSYS
</h3>
<p class="c-app-card__desc">Widely applied coastal circulation and coastal flooding model.</p>
<ul class="c-app-card__types">
<li> </li>
</ul>
<ul class="c-app-card__flags">
<li class="c-app-card__repo">
Licensed
</li>
</ul>
<a class="c-app-card__link" href="#">magic link</a>
</div>
</div>
<div class="col col-12 col-md-6 col-xl-4">
<div class="c-app-card">
<h3 class="c-app-card__title">
<i class="icon icon-user"></i>
ClawPack
</h3>
<p class="c-app-card__desc">Model and simulate coastal and oceanic processes.</p>
<ul class="c-app-card__types">
<li>Tsunami</li>
<li>Storm Surge</li>
<li>Flood</li>
</ul>
<ul class="c-app-card__flags">
<li class="c-app-card__other">
SimCenter
</li>
<li class="c-app-card__repo">
Licensed
</li>
</ul>
<a class="c-app-card__link" href="#">magic link</a>
</div>
</div>
<div class="col col-12 col-md-6 col-xl-4">
<div class="c-app-card">
<h3 class="c-app-card__title">
<i class="icon icon-user"></i>
Hazmapper
</h3>
<p class="c-app-card__desc">Visualize, analyze, and share geospatial data.</p>
<ul class="c-app-card__types">
<li> </li>
</ul>
<ul class="c-app-card__flags">
<li class="c-app-card__repo">
Open Source
</li>
</ul>
<a class="c-app-card__link" href="#">magic link</a>
</div>
</div>
<div class="col col-12 col-md-6 col-xl-4">
<div class="c-app-card">
<h3 class="c-app-card__title">
<i class="icon icon-user"></i>
QGIS
</h3>
<p class="c-app-card__desc">Create, edit, visualize and analyze geospatial information.</p>
<ul class="c-app-card__types">
<li> </li>
</ul>
<ul class="c-app-card__flags">
<li class="c-app-card__repo">
Licensed
</li>
</ul>
<a class="c-app-card__link" href="#">magic link</a>
</div>
</div>
<div class="col col-12 col-md-6 col-xl-4">
<div class="c-app-card">
<h3 class="c-app-card__title">
<i class="icon icon-user"></i>
OpenSEES
</h3>
<p class="c-app-card__desc">Advanced seismic and structural analysis</p>
<ul class="c-app-card__types">
<li>Earthquake</li>
</ul>
<ul class="c-app-card__flags">
<li class="c-app-card__other">
<strong>Popular</strong>
</li>
<li class="c-app-card__repo">
Open Source
</li>
</ul>
<a class="c-app-card__link" href="#">magic link</a>
</div>
</div>
<div class="col col-12 col-md-6 col-xl-4">
<div class="c-app-card">
<h3 class="c-app-card__title">
<i class="icon icon-user"></i>
LS-DYNA
</h3>
<p class="c-app-card__desc">Conduct dynamic finite element analysis of complex physics</p>
<ul class="c-app-card__types">
<li>Earthquake</li>
<li>Landslide</li>
<li>Tsunami</li>
<li>Storm Surge</li>
</ul>
<ul class="c-app-card__flags">
<li class="c-app-card__repo">
Licensed
</li>
</ul>
<a class="c-app-card__link" href="#">magic link</a>
</div>
</div>
<div class="col col-12 col-md-6 col-xl-4">
<div class="c-app-card">
<h3 class="c-app-card__title">
<i class="icon icon-user"></i>
OpenFOAM
</h3>
<p class="c-app-card__desc">Simulate and analyze fluid flow and heat transfer</p>
<ul class="c-app-card__types">
<li>Tsunami</li>
<li>Storm Surge</li>
<li>Flood</li>
<li>Fire</li>
</ul>
<ul class="c-app-card__flags">
<li class="c-app-card__repo">
Open Source
</li>
</ul>
<a class="c-app-card__link" href="#">magic link</a>
</div>
</div>
<div class="col col-12 col-md-6 col-xl-4">
<div class="c-app-card">
<h3 class="c-app-card__title">
EE-UQ
</h3>
<p class="c-app-card__desc">Determine the response of a structure to an earthquake.</p>
<ul class="c-app-card__types">
<li>Earthquake</li>
</ul>
<ul class="c-app-card__flags">
<li class="c-app-card__other">
SimCenter
</li>
<li class="c-app-card__repo">
Open Source
</li>
</ul>
<a class="c-app-card__link" href="#">magic link</a>
</div>
</div>
</div>
</div>
/* To add vertical gap in Bootstrap 4 grid */
.col {
margin-bottom: var(--global-space--bootstrap-gap);
}
.row {
margin-bottom: calc( var(--global-space--bootstrap-gap) * -1 );
}
/* To stretch app card height to match col */
.col .c-app-card {
height: 100%;
}
{
"shouldSkipPattern": false,
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "components",
"📝 shouldSkipPattern": "because core-styles.….css does not import this",
"shouldLoadBootstrap": true,
"📝 shouldLoadBootstrap": "to use Bootstrap 4 grid for layout",
"supportStyles": [
"../../assets/components/bootstrap.row.css",
"../../assets/components/cortal.icon.css"
],
"can-wrap-in-a-link": false,
"data": [
{
"title": "ADCIRC",
"desc": "Widely applied coastal circulation and coastal flooding model.",
"types": [
"Storm Surge",
"Hurricane",
"Flood"
],
"flags": [
{
"name": "Popular",
"type": "other",
"should-highlight": true
},
{
"name": "Open Source",
"type": "repo"
}
]
},
{
"title": "ANSYS",
"icon": "ansys",
"desc": "Widely applied coastal circulation and coastal flooding model.",
"flags": [
{
"name": "Licensed",
"type": "repo"
}
]
},
{
"title": "ClawPack",
"icon": "clawpack",
"desc": "Model and simulate coastal and oceanic processes.",
"types": [
"Tsunami",
"Storm Surge",
"Flood"
],
"flags": [
{
"name": "SimCenter",
"type": "other"
},
{
"name": "Licensed",
"type": "repo"
}
]
},
{
"title": "Hazmapper",
"icon": "hazmapper",
"desc": "Visualize, analyze, and share geospatial data.",
"flags": [
{
"name": "Open Source",
"type": "repo"
}
]
},
{
"title": "QGIS",
"icon": "qgis",
"desc": "Create, edit, visualize and analyze geospatial information.",
"flags": [
{
"name": "Licensed",
"type": "repo"
}
]
},
{
"title": "OpenSEES",
"icon": "opensees",
"desc": "Advanced seismic and structural analysis",
"types": [
"Earthquake"
],
"flags": [
{
"name": "Popular",
"type": "other",
"should-highlight": true
},
{
"name": "Open Source",
"type": "repo"
}
]
},
{
"title": "LS-DYNA",
"icon": "lsdyna",
"desc": "Conduct dynamic finite element analysis of complex physics",
"types": [
"Earthquake",
"Landslide",
"Tsunami",
"Storm Surge"
],
"flags": [
{
"name": "Licensed",
"type": "repo"
}
]
},
{
"title": "OpenFOAM",
"icon": "openfoam",
"desc": "Simulate and analyze fluid flow and heat transfer",
"types": [
"Tsunami",
"Storm Surge",
"Flood",
"Fire"
],
"flags": [
{
"name": "Open Source",
"type": "repo"
}
]
},
{
"title": "EE-UQ",
"desc": "Determine the response of a structure to an earthquake.",
"types": [
"Earthquake"
],
"flags": [
{
"name": "SimCenter",
"type": "other"
},
{
"name": "Open Source",
"type": "repo"
}
]
}
]
}