Summary

97 /100 Current performance score December 12, 2017 at 1:46 am Last test

Previous score 76
Improvement -1
Recommendations 4

Documentation

Variables Depending on the project and the image size you gonna use for the Summary element, you gonna have to overwrite some base variables. NOTE: Remember to include these variables on top of your file to call them correctly during build.

Regular summary This element is set to have min-height: 212px, making it the most used through projects.

// Set summary image
//
// NOTE: If you don't enter this variable, the image won't show on the summary.
$summary-image: 'path-to-plugin/assets/images/your-image.png';

// ========================================
// Overwrite image size
$summary-image--width:  96px;
$summary-image--height: 96px;

// ========================================
// Overwrite image position
$summary-image--position-x: 80px; // Horizontal position (only)
$summary-image--position-y: center; // Vertical position (only)

Small summary This element is set to have min-height: 151px, used mostly on projects that require a small resume to display, like Forminator's forms listings page.

// Set small summary image
//
// NOTE: If you don't enter this variable and $summary-image exists,
// this image will show instead small summary image, but if none of them
// exist the image won't show on the summary.
$summary-image-sm: 'path-to-plugin/assets/images/your-small-image.png';

// Overwrite image size
$summary-image-sm--width:  96px;
$summary-image-sm--height: 96px;

// ========================================
// Overwrite image position
$summary-image-sm--position-x: 30px; // Horizontal position (only)
$summary-image-sm--position-y: center; // Vertical position (only)

Markup There's one base markup for the summary element with just a slight change based on the box size.

If you need a small summary you can add next to sui-summary a new class called sui-summary-sm.

<div class="sui-box sui-summary">

	<div class="sui-summary-image-space" aria-hidden="true"></div>

	<div class="sui-summary-segment">

		<div class="sui-summary-details">

			<span class="sui-summary-large">97</span>
				<span aria-hidden="true" class="sui-icon-info sui-warning"></span>
				<span class="sui-summary-percent">/100</span>
			<span class="sui-summary-sub">Current performance score</span>

			<span class="sui-summary-detail">December 12, 2017 at 1:46 am</span>
			<span class="sui-summary-sub">Last test</span>

		</div>

	</div>

	<div class="sui-summary-segment">

		<ul class="sui-list">

			<li>
				<span class="sui-list-label">Previous score</span>
				<span class="sui-list-detail">76</span>
			</li>

			<li>
				<span class="sui-list-label">Improvement</span>
				<span class="sui-list-detail"><span class="sui-tag sui-tag-error">-1</span></span>
			</li>

			<li>
				<span class="sui-list-label">Recommendations</span>
				<span class="sui-list-detail">4</span>
			</li>

		</ul>

	</div>

</div>