feat(projects): add stat-card partial
This commit is contained in:
@@ -117,3 +117,30 @@
|
||||
outline: 2px solid var(--color-primary, #b6c4ff);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--color-surface-container, #1e1f25);
|
||||
border: 1px solid var(--color-outline-variant, #444651);
|
||||
border-radius: 1rem;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-card__icon { color: var(--color-on-surface-variant, #c5c5d3); }
|
||||
|
||||
.stat-card__value {
|
||||
font-weight: 700;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-on-surface, #e3e1e9);
|
||||
}
|
||||
|
||||
.stat-card__label {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-on-surface-variant, #c5c5d3);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
<?php
|
||||
/**
|
||||
* Project Stat Card Component
|
||||
*
|
||||
* Renders one stat tile. Expects $label, $value, and $icon (optional SVG
|
||||
* markup) in scope. $icon MUST be aria-hidden decorative markup; the label
|
||||
* is the accessible name.
|
||||
*
|
||||
* @package KsPortfolio
|
||||
*/
|
||||
|
||||
namespace KsPortfolio;
|
||||
|
||||
if ( ! isset( $label ) || ! isset( $value ) ) {
|
||||
return;
|
||||
}
|
||||
$stat_label = (string) $label;
|
||||
$stat_value = (string) $value;
|
||||
?>
|
||||
<div class="stat-card" role="group" aria-label="<?php echo esc_attr( $stat_label ); ?>">
|
||||
<?php if ( isset( $icon ) && $icon ) : ?>
|
||||
<span class="stat-card__icon" aria-hidden="true"><?php echo $icon; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- icon is hardcoded decorative SVG in callers. ?></span>
|
||||
<?php endif; ?>
|
||||
<span class="stat-card__value"><?php echo esc_html( $stat_value ); ?></span>
|
||||
<span class="stat-card__label"><?php echo esc_html( $stat_label ); ?></span>
|
||||
</div>
|
||||
Reference in New Issue
Block a user