Here is an example of using the Error Summary in a plain html page:
<html>
<head>
<link href="https://developer.temenos.com/uux/base.css" rel="stylesheet" />
<script src="https://developer.temenos.com/uux/unified-ux-web.min.js"></script>
</head>
<body>
<div>
<uwc-form>
<form>
<uwc-error-summary id="errSumm"></uwc-error-summary><br />
<uwc-grid container>
<uwc-text-field id="firstName" label="First Name" value="Tom"></uwc-text-field>
<uwc-text-field id="lastName" label="Last Name"></uwc-text-field>
<uwc-text-field id="nickName" label="Nick Name"></uwc-text-field>
<uwc-button cta label="Show Error Summary" id="submitBtn">
</uwc-button>
</uwc-grid>
</form>
</uwc-form>
</div>
<script>
window.onload = function () {
document.getElementById("submitBtn").onclick = function () {
document.getElementById('errSumm').errorObjectDiagnostics =
[
{ "fieldName": "lastName", "code": "ABC-1001", "message": "Sample Error on Last Name Field" },
{ "fieldName": "nickName", "code": "INT-1002", "message": "Sample Error on Nick Name Field" }
];
}
}
</script>
</body>
</html>