diff --git a/golden/modules/byblameentry-sk/byblameentry-sk-demo.html b/golden/modules/byblameentry-sk/byblameentry-sk-demo.html
new file mode 100644
index 0000000..874b0a3
--- /dev/null
+++ b/golden/modules/byblameentry-sk/byblameentry-sk-demo.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>byblameentry-sk</title>
+  <meta charset="utf-8"/>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+<gold-scaffold-sk app_title="Skia Public" testing_offline>
+  <!-- byblameentry-sk elements will be inserted here dynamically. -->
+</gold-scaffold-sk>
+</body>
+</html>
diff --git a/golden/modules/byblameentry-sk/byblameentry-sk-demo.js b/golden/modules/byblameentry-sk/byblameentry-sk-demo.js
new file mode 100644
index 0000000..1d7d05c
--- /dev/null
+++ b/golden/modules/byblameentry-sk/byblameentry-sk-demo.js
@@ -0,0 +1,11 @@
+import './index.js'
+import '../gold-scaffold-sk'
+import { $$ } from 'common-sk/modules/dom'
+import { byBlameEntry, gitLog } from './test_data'
+
+const entry = document.createElement('byblameentry-sk');
+entry.byBlameEntry = byBlameEntry;
+entry.gitLog = gitLog;
+entry.baseRepoUrl = 'https://skia.googlesource.com/skia.git';
+entry.corpus = 'gm';
+$$('gold-scaffold-sk').appendChild(entry);
diff --git a/golden/modules/byblameentry-sk/byblameentry-sk.js b/golden/modules/byblameentry-sk/byblameentry-sk.js
new file mode 100644
index 0000000..58565c4
--- /dev/null
+++ b/golden/modules/byblameentry-sk/byblameentry-sk.js
@@ -0,0 +1,162 @@
+/**
+ * @module modules/byblame-page-sk/byblameentry-sk
+ * @description <h2><code>byblameentry-sk</code></h2>
+ *
+ * Displays a
+ * [ByBlameEntry]{@link https://github.com/google/skia-buildbot/blob/0e14ae66aa226821e981bbd4c63dc8d07776997a/golden/go/web/web.go#L318},
+ * that is, a blame group of untriaged digests.
+ */
+
+import { define } from 'elements-sk/define'
+import { ElementSk } from '../../../infra-sk/modules/ElementSk'
+import { html } from 'lit-html'
+import { diffDate } from '../../../common-sk/modules/human';
+
+const template = (el) => html`
+<div class=blame>
+  <p>
+    <a href=${el._blameHref()} class=triage target=_blank rel=noopener>
+      ${el.byBlameEntry.nDigests === 1
+          ? '1 untriaged digest'
+          : `${el.byBlameEntry.nDigests} untriaged digests`}
+    </a>
+  </p>
+
+  ${!el.byBlameEntry.commits || el.byBlameEntry.commits.length === 0
+      ? html`<p class=no-blamelist>No blamelist.</p>`
+      : blameListTemplate(el)}
+
+  <h3>Tests affected</h3>
+  <p class=num-tests-affected>
+    ${el.byBlameEntry.nTests === 1
+        ? '1 test affected.'
+        : `${el.byBlameEntry.nTests} tests affected.`}
+  </p>
+
+  ${affectedTestsTemplate(el.byBlameEntry.affectedTests)}
+</div>
+`;
+
+const blameListTemplate = (el) => html`
+<h3>Blame</h3>
+
+<ul class=blames>
+  ${el.byBlameEntry.commits.map(
+      (commit) => html`
+          <li>
+            <a href=${el._commitHref(commit.hash)}
+               target=_blank
+               rel=noopener>
+              ${commit.hash.slice(0, 7)}
+            </a>
+            <span class=commit-message>
+              ${el._commitMessage(commit.hash)}
+            </span>
+            <br/>
+            <small>
+              <span class=author>${commit.author}</span>,
+              <span class=age>
+                ${diffDate(commit.commit_time * 1000)}
+              </span> ago.
+            </small>
+          </li>`)}
+</ul>`;
+
+const affectedTestsTemplate =
+    (affectedTests) =>
+        !affectedTests || affectedTests.length === 0
+            ? ''
+            : html`
+<table class=affected-tests>
+  <thead>
+    <tr>
+      <th>Test</th>
+      <th># Digests</th>
+      <th>Example</th>
+    </tr>
+  </thead>
+  <tbody>
+    ${affectedTests.map(
+        (test) => html`
+            <tr>
+              <td class=test>${test.test}</td>
+              <td class=num-digests>${test.num}</td>
+              <td>
+                <a href=${detailHref(test)}
+                   class=example-link
+                   target=_blank
+                   rel=noopener>
+                  ${test.sample_digest}
+                </a>
+              </td>
+            </tr>`)}
+  </tbody>
+</table>`;
+
+const detailHref =
+    (test) => `/detail?test=${test.test}&digest=${test.sample_digest}`;
+
+define('byblameentry-sk', class extends ElementSk {
+  constructor() {
+    super(template);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._render();
+  }
+
+  /**
+   * @prop byBlameEntry {Object} A ByBlameEntry object returned by the
+   *     /json/byblame RPC endpoint.
+   */
+  get byBlameEntry() { return this._byBlameEntry; }
+  set byBlameEntry(v) {
+    this._byBlameEntry = v;
+    this._render();
+  }
+
+  /**
+   * @prop gitLog {Object} A gitLog object fetched from /json/gitlog containing
+   *     commit messages for the commits referenced by the ByBlameEntry object.
+   */
+  get gitLog() { return this._gitLog; }
+  set gitLog(v) {
+    this._gitLog = v;
+    this._render();
+  }
+
+  /** @prop corpus {string} The corpus corresponding to this blame group. */
+  get corpus() { return this._corpus; }
+  set corpus(v) {
+    this._corpus = v;
+    this._render();
+  }
+
+  /** @prop baseRepoUrl {string} Base repository URL. */
+  get baseRepoUrl() { return this._baseRepoUrl; }
+  set baseRepoUrl(v) {
+    this._baseRepoUrl = v;
+    this._render();
+  }
+
+  _blameHref() {
+    const query = encodeURIComponent(`source_type=${this.corpus}`);
+    const groupID = this.byBlameEntry.groupID;
+    return `/search?blame=${groupID}&unt=true&head=true&query=${query}`;
+  }
+
+  _commitHref(hash) {
+    if (!hash || !this.baseRepoUrl) {
+      return '';
+    }
+    const path = this.baseRepoUrl.indexOf('github.com') !== -1 ? 'commit' :'+';
+    return `${this.baseRepoUrl}/${path}/${hash}`;
+  }
+
+  _commitMessage(hash) {
+    const commitInfo =
+        this.gitLog.log.find((commitInfo) => commitInfo.commit === hash);
+    return commitInfo ? commitInfo.message : '';
+  }
+});
diff --git a/golden/modules/byblameentry-sk/byblameentry-sk.scss b/golden/modules/byblameentry-sk/byblameentry-sk.scss
new file mode 100644
index 0000000..d799a6f
--- /dev/null
+++ b/golden/modules/byblameentry-sk/byblameentry-sk.scss
@@ -0,0 +1,19 @@
+@import '~elements-sk/colors';
+
+byblameentry-sk {
+  .blame {
+    border: 1px solid var(--light-gray);
+    margin: 10px;
+    padding: 10px;
+  }
+
+  table.affected-tests {
+    td {
+      padding: 5px;
+    }
+  }
+
+  ul.blames li {
+    margin-bottom: 1em;
+  }
+}
\ No newline at end of file
diff --git a/golden/modules/byblameentry-sk/byblameentry-sk_test.js b/golden/modules/byblameentry-sk/byblameentry-sk_test.js
new file mode 100644
index 0000000..ccba35f
--- /dev/null
+++ b/golden/modules/byblameentry-sk/byblameentry-sk_test.js
@@ -0,0 +1,274 @@
+import './index.js'
+import { $, $$ } from 'common-sk/modules/dom'
+import { deepCopy } from 'common-sk/modules/object'
+import { byBlameEntry, gitLog } from './test_data'
+
+describe('byblameentry-sk', () => {
+  let byBlameEntrySk;
+
+  function newByBlameEntrySk(
+      byBlameEntry,
+      {
+        testGitLog = gitLog,
+        baseRepoUrl = 'https://skia.googlesource.com/skia.git',
+        corpus = 'gm'
+      } = {}) {
+    byBlameEntrySk = document.createElement('byblameentry-sk');
+    byBlameEntrySk.byBlameEntry = byBlameEntry;
+    byBlameEntrySk.gitLog = testGitLog;
+    byBlameEntrySk.baseRepoUrl = baseRepoUrl;
+    byBlameEntrySk.corpus = corpus;
+    document.body.appendChild(byBlameEntrySk);
+  }
+
+  let clock;
+
+  beforeEach(() => {
+    // This is necessary to make commit ages deterministic, and is set to 50
+    // seconds after Elisa's commit in the 'full example' test case below.
+    clock = sinon.useFakeTimers(1573149864000); // Nov 7, 2019 6:04:24 PM GMT
+  });
+
+  afterEach(() => {
+    // Remove the stale instance under test.
+    if (byBlameEntrySk) {
+      document.body.removeChild(byBlameEntrySk);
+      byBlameEntrySk = null;
+    }
+    clock.restore();
+  });
+
+  describe('full example', () => {
+    it('renders correctly', async () => {
+      // This is a comprehensive example of a blame group with multiple
+      // untriaged digests that could have originated from two different
+      // commits, and includes a list of affected tests along with links to an
+      // example untriaged digest for each affected test.
+
+      await newByBlameEntrySk(byBlameEntry);
+      expectTriageLinkEquals(
+          '112 untriaged digests',
+          // This server-generated blame ID is a colon-separated list of the
+          // commit hashes blamed for these untriaged digests.
+          '/search?blame=aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa:bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb&unt=true&head=true&query=source_type%3Dgm');
+      expectBlamesListEquals([{
+        linkText: 'bbbbbbb',
+        linkHref: 'https://skia.googlesource.com/skia.git/+/bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb',
+        commitMessage: 'One glyph() to rule them all!!!',
+        author: 'Elisa (elisa@example.com)',
+        age: '50s'
+      }, {
+        linkText: 'aaaaaaa',
+        linkHref: 'https://skia.googlesource.com/skia.git/+/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
+        commitMessage: 'flesh out blendmodes through Screen',
+        author: 'Joe (joe@example.com)',
+        age: '5m'
+      }]);
+      expectNumTestsAffectedEquals('7 tests affected.');
+      expectAffectedTestsTableEquals([{
+        test: 'aarectmodes',
+        numDigests: 50,
+        exampleLinkText: 'c6476baec94eb6a5071606575318e4df',
+        exampleLinkHref: '/detail?test=aarectmodes&digest=c6476baec94eb6a5071606575318e4df',
+      }, {
+        test: 'aaxfermodes',
+        numDigests: 32,
+        exampleLinkText: '4acfd6b3a3943cc5d75cd22e966ae6f1',
+        exampleLinkHref: '/detail?test=aaxfermodes&digest=4acfd6b3a3943cc5d75cd22e966ae6f1',
+      }, {
+        test: 'hairmodes',
+        numDigests: 21,
+        exampleLinkText: 'f9e20c63b5ce3b58d9b6a90fa3e7224c',
+        exampleLinkHref: '/detail?test=hairmodes&digest=f9e20c63b5ce3b58d9b6a90fa3e7224c',
+      }, {
+        test: 'imagefilters_xfermodes',
+        numDigests: 5,
+        exampleLinkText: '47644613317040264fea6fa815af32e8',
+        exampleLinkHref: '/detail?test=imagefilters_xfermodes&digest=47644613317040264fea6fa815af32e8',
+      }, {
+        test: 'lattice2',
+        numDigests: 2,
+        exampleLinkText: '16e41798ecd59b1523322a57b49cc17f',
+        exampleLinkHref: '/detail?test=lattice2&digest=16e41798ecd59b1523322a57b49cc17f',
+      }, {
+        test: 'xfermodes',
+        numDigests: 1,
+        exampleLinkText: '8fbee03f794c455c4e4842ec2736b744',
+        exampleLinkHref: '/detail?test=xfermodes&digest=8fbee03f794c455c4e4842ec2736b744',
+      }, {
+        test: 'xfermodes3',
+        numDigests: 1,
+        exampleLinkText: 'fed2ff29abe371fc0ec1b2c65dfb3949',
+        exampleLinkHref: '/detail?test=xfermodes3&digest=fed2ff29abe371fc0ec1b2c65dfb3949',
+      }]);
+    });
+  });
+
+  describe('triage link', () => {
+    it('renders link text in singular if there is just 1 digest', async () => {
+      const testByBlameEntry = deepCopy(byBlameEntry);
+      testByBlameEntry.nDigests = 1;
+      await newByBlameEntrySk(testByBlameEntry);
+      expectTriageLinkEquals(
+          '1 untriaged digest',
+          '/search?blame=aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa:bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb&unt=true&head=true&query=source_type%3Dgm');
+    });
+
+    it('includes the right corpus in the link href', async () => {
+      await newByBlameEntrySk(byBlameEntry, {corpus: 'svg'});
+      expectTriageLinkEquals(
+          '112 untriaged digests',
+          '/search?blame=aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa:bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb&unt=true&head=true&query=source_type%3Dsvg');
+    })
+  });
+
+  describe('blamelist', () => {
+    it('shows "No blamelist" message if there are 0 blames', async () => {
+      const testByBlameEntry = deepCopy(byBlameEntry);
+      testByBlameEntry.commits = [];
+      await newByBlameEntrySk(testByBlameEntry);
+      expectBlamesListEquals([]);
+    });
+
+    it('points commit links to GitHub if repo is hosted there', async () => {
+      await newByBlameEntrySk(
+          byBlameEntry,
+          {baseRepoUrl: 'https://github.com/google/skia'});
+      expectBlamesListEquals([{
+        linkText: 'bbbbbbb',
+        linkHref: 'https://github.com/google/skia/commit/bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb',
+        commitMessage: 'One glyph() to rule them all!!!',
+        author: 'Elisa (elisa@example.com)',
+        age: '50s'
+      }, {
+        linkText: 'aaaaaaa',
+        linkHref: 'https://github.com/google/skia/commit/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
+        commitMessage: 'flesh out blendmodes through Screen',
+        author: 'Joe (joe@example.com)',
+        age: '5m'
+      }]);
+    });
+
+    it('shows empty commit messages if Git log is empty/missing', async () => {
+      await newByBlameEntrySk(byBlameEntry, {testGitLog: {log: []}});
+      expectBlamesListEquals([{
+        linkText: 'bbbbbbb',
+        linkHref: 'https://skia.googlesource.com/skia.git/+/bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb',
+        commitMessage: '',
+        author: 'Elisa (elisa@example.com)',
+        age: '50s'
+      }, {
+        linkText: 'aaaaaaa',
+        linkHref: 'https://skia.googlesource.com/skia.git/+/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
+        commitMessage: '',
+        author: 'Joe (joe@example.com)',
+        age: '5m'
+      }]);
+    })
+  });
+
+  describe('affected tests', () => {
+    it('renders correctly with nTests = 0', async () => {
+      const testByBlameEntry = deepCopy(byBlameEntry);
+      testByBlameEntry.nTests = 0;
+      testByBlameEntry.affectedTests = [];
+      await newByBlameEntrySk(testByBlameEntry);
+      expectNumTestsAffectedEquals('0 tests affected.');
+      expectAffectedTestsTableEquals([]);
+    });
+
+    it('renders correctly with nTests = 1 and 0 affected tests', async () => {
+      const testByBlameEntry = deepCopy(byBlameEntry);
+      testByBlameEntry.nTests = 1;
+      testByBlameEntry.affectedTests = [];
+      await newByBlameEntrySk(testByBlameEntry);
+      expectNumTestsAffectedEquals('1 test affected.');
+      expectAffectedTestsTableEquals([]);
+    });
+
+    it('renders correctly with nTests = 2 and 0 affected tests', async () => {
+      const testByBlameEntry = deepCopy(byBlameEntry);
+      testByBlameEntry.nTests = 2;
+      testByBlameEntry.affectedTests = [];
+      await newByBlameEntrySk(testByBlameEntry);
+      expectNumTestsAffectedEquals('2 tests affected.');
+      expectAffectedTestsTableEquals([]);
+    });
+
+    it('renders correctly with nTests = 2 and one affected test', async () => {
+      const testByBlameEntry = deepCopy(byBlameEntry);
+      testByBlameEntry.nTests = 2;
+      testByBlameEntry.affectedTests = [{
+        "test": "aarectmodes",
+        "num": 5,
+        "sample_digest": "c6476baec94eb6a5071606575318e4df",
+      }];
+      await newByBlameEntrySk(testByBlameEntry);
+      expectNumTestsAffectedEquals('2 tests affected.');
+      expectAffectedTestsTableEquals([{
+        test: 'aarectmodes',
+        numDigests: 5,
+        exampleLinkText: 'c6476baec94eb6a5071606575318e4df',
+        exampleLinkHref:
+            '/detail?test=aarectmodes&digest=c6476baec94eb6a5071606575318e4df',
+      }]);
+    });
+  });
+
+  const expectTriageLinkEquals = (text, href) => {
+    const triageLink = $$('a.triage', byBlameEntrySk);
+    expect(triageLink.innerText).to.contain(text);
+    expect(triageLink.href).to.have.string(href);
+  };
+
+  const expectBlamesListEquals = (expectedBlames) => {
+    const noBlameList = $$('p.no-blamelist', byBlameEntrySk);
+    const blames = $('ul.blames li', byBlameEntrySk);
+
+    if (!expectedBlames.length) {
+      expect(noBlameList.innerText).to.contain('No blamelist.');
+      expect(blames).to.be.empty;
+    } else {
+      expect(noBlameList).to.be.null;
+      expect(blames).to.have.length(expectedBlames.length);
+
+      for (let i = 0; i < expectedBlames.length; i++) {
+        const linkText = $$('a', blames[i]).innerText;
+        const linkHref = $$('a', blames[i]).href;
+        const commitMessage =
+            $$('.commit-message', blames[i]).innerText;
+        const author = $$('.author', blames[i]).innerText;
+        const age = $$('.age', blames[i]).innerText;
+
+        expect(linkText).to.contain(expectedBlames[i].linkText);
+        expect(linkHref).to.equal(expectedBlames[i].linkHref);
+        expect(commitMessage).to.contain(expectedBlames[i].commitMessage);
+        expect(author).to.contain(expectedBlames[i].author);
+        expect(age).to.contain(expectedBlames[i].age);
+      }
+    }
+  };
+
+  const expectNumTestsAffectedEquals =
+      (numTestsAffected) =>
+          expect($$('.num-tests-affected', byBlameEntrySk).innerText)
+              .to.contain(numTestsAffected);
+
+  const expectAffectedTestsTableEquals = (expectedRows) => {
+    const actualRows = $('.affected-tests tbody tr');
+    expect(actualRows.length).to.equal(expectedRows.length);
+
+    for (let i = 0; i < expectedRows.length; i++) {
+      const test = $$('.test', actualRows[i]).innerText;
+      const numDigests =
+          +$$('.num-digests', actualRows[i]).innerText;
+      const exampleLinkText = $$('a.example-link', actualRows[i]).innerText;
+      const exampleLinkHref = $$('a.example-link', actualRows[i]).href;
+
+      expect(test).to.contain(expectedRows[i].test);
+      expect(numDigests).to.equal(expectedRows[i].numDigests);
+      expect(exampleLinkText).to.contain(expectedRows[i].exampleLinkText);
+      expect(exampleLinkHref).to.contain(expectedRows[i].exampleLinkHref);
+    }
+  };
+});
diff --git a/golden/modules/byblameentry-sk/index.js b/golden/modules/byblameentry-sk/index.js
new file mode 100644
index 0000000..43cb8c9
--- /dev/null
+++ b/golden/modules/byblameentry-sk/index.js
@@ -0,0 +1,2 @@
+import './byblameentry-sk.js'
+import './byblameentry-sk.scss'
diff --git a/golden/modules/byblameentry-sk/test_data.js b/golden/modules/byblameentry-sk/test_data.js
new file mode 100644
index 0000000..7dfc6e6
--- /dev/null
+++ b/golden/modules/byblameentry-sk/test_data.js
@@ -0,0 +1,53 @@
+export const byBlameEntry = {
+  "groupID": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa:bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb",
+  "nDigests": 112,
+  "nTests": 7,
+  "affectedTests": [{
+    "test": "aarectmodes",
+    "num": 50,
+    "sample_digest": "c6476baec94eb6a5071606575318e4df"
+  }, {
+    "test": "aaxfermodes",
+    "num": 32,
+    "sample_digest": "4acfd6b3a3943cc5d75cd22e966ae6f1"
+  }, {
+    "test": "hairmodes",
+    "num": 21,
+    "sample_digest": "f9e20c63b5ce3b58d9b6a90fa3e7224c"
+  }, {
+    "test": "imagefilters_xfermodes",
+    "num": 5,
+    "sample_digest": "47644613317040264fea6fa815af32e8"
+  }, {
+    "test": "lattice2",
+    "num": 2,
+    "sample_digest": "16e41798ecd59b1523322a57b49cc17f"
+  }, {
+    "test": "xfermodes",
+    "num": 1,
+    "sample_digest": "8fbee03f794c455c4e4842ec2736b744"
+  }, {
+    "test": "xfermodes3",
+    "num": 1,
+    "sample_digest": "fed2ff29abe371fc0ec1b2c65dfb3949"
+  }],
+  "commits": [{
+    "commit_time": 1573149814,
+    "hash": "bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb",
+    "author": "Elisa (elisa@example.com)"
+  }, {
+    "commit_time": 1573149564,
+    "hash": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
+    "author": "Joe (joe@example.com)"
+  }]
+};
+
+export const gitLog = {
+  log: [{
+    "commit": "bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb",
+    "message": "One glyph() to rule them all!!!"
+  }, {
+    "commit": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
+    "message": "flesh out blendmodes through Screen"
+  }]
+};