Gonk Design: Pattern Library
{{ design.patterns.renderPattern('corner', {}) | safe }}
Source (Nunjucks)
<span class="corner" aria-hidden="true"></span>The corner block is a highly customisable presentation component. By default, it will be a 100px square with dark and light clips paths.
It can be configured as follows:
| Custom property | Default value |
|---|---|
--corner-size |
100px |
--corner-primary-color |
var(--color-light) |
--corner-secondary-color |
var(--color-dark) |
--corner-offset |
30% |
--corner-transition |
var(--transition-bounce) |
{{ design.patterns.renderPattern('corner/themed', {}) | safe }}
Source (Nunjucks)
<style>
.my-element {
--corner-primary-color: var(--color-primary);
--corner-size: 50vh;
--corner-offset: 50%;
}
</style>
<div class="my-element">
<span class="corner" aria-hidden="true"></span>
</div>Gonk Design: Pattern Library