Project preview box

The project card uses a rounded rectangle box shape with a drop shadow to display the project’s featured image plus some key details about the project.

The shape of this box is designed as follows:

• Dimensions: Scalable with a width of 335px
• Border radius: 10px
• Border: No border
• Drop shadow:
  • Distance: 4px for both X and Y
  • Blur radius: 4px
  • Spread radius: 4px
  • Color: #000 (Black)
  • Opacity: 25%

Example css:

.project-card {
    width: 335px;
    border-radius: 10px;
    box-shadow: 4px 4px 4px 4px rgba(0, 0, 0, 0.25);
}

KPI Score card box

The KPI score card box uses a rounded rectangle box shape with a drop shadow to display the project core KPI’s.

The shape of this box is designed as follows:

• Dimensions: Scalable with a width of 82px
  • Aspect ratio: 1:1
• Border radius: 10px
• Border: No border
• Drop shadow:
  • Distance: x: 2px for both X and Y
  • Blur radius: 4px
  • Spread radius: 1px
  • Color: #000 (Black)
  • Opacity: 25%

Example css:

.kpi-card {
    width: 82px;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.25);
}

Examples

Boxes

project-preview-card

<div class="project-card">
  <h1>Project name</h1>
  <h2>Project description</h2>
  <p>Protect and restore the marine-coastal ecosystems (reef, seagrass, and mangrove).</p>
</div>

kpi-card

<div class="kpi-card">
  <h3>KPI</h3>
  <p>##</p>
</div>