Summary Box

Highlight important information, statistics, or key points in a prominent container.

Basic Summary Box

Project Overview

Last updated: Today

This is a summary box that can be used to highlight important information, key metrics, or project overviews. It provides a clear visual hierarchy for important content.

<div class="ethio-summary">
    <div class="ethio-summary-header">
      <div>
        <h3 class="ethio-summary-title">Project Overview</h3>
        <p class="ethio-summary-subtitle">Last updated: Today</p>
      </div>
    </div>
    <div class="ethio-summary-content">
      <p>Summary content goes here.</p>
    </div>
    <div class="ethio-summary-footer">
      <button class="ethio-btn ethio-btn-primary">Action</button>
    </div>
  </div>

Summary Variants

Primary Summary

With primary accent border.

Success Summary

With success accent border.

Elevated Summary

With enhanced shadow effect.

<div class="ethio-summary ethio-summary-primary">
    <!-- Primary variant -->
  </div>
  
  <div class="ethio-summary ethio-summary-success">
    <!-- Success variant -->
  </div>
  
  <div class="ethio-summary ethio-summary-elevated">
    <!-- Elevated variant -->
  </div>