<table class="sg-symbol-table">
<thead>
<tr>
<th>Preview</th>
<th>ID</th>
<th>Title ID</th>
<th>Original dimensions</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sg-svg-highlight">
<svg role="img" class="sg-symbol-table__preview" aria-label="Arrow right" width="32px" height="32px">
<use xlink:href="#ui-arrow-right"></use>
</svg>
</td>
<td>
<code>#ui-arrow-right</code>
</td>
<td>
<code>#ui-arrow-right__title</code>
</td>
<td>
<code>32px</code> × <code>32px</code>
</td>
</tr>
</tbody>
</table>
<p>Some SVGs have shapes that can be independently filled via the <code>--grav-co-svg-hl-*</code> custom properties. To visualise this, the above SVGs have such regions coloured in as follows:</p>
<ul class="sg-highlight-preview sg-svg-highlight">
<li>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-svg-hl-1);"></span>
<code>--grav-co-svg-hl-1</code>
</span>
</li>
<li>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-svg-hl-2);"></span>
<code>--grav-co-svg-hl-2</code>
</span>
</li>
<li>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-svg-hl-3);"></span>
<code>--grav-co-svg-hl-3</code>
</span>
</li>
</ul>
{% from '@inline-svg-symbol' import inlineSvg %}
{% from '@color-schemes' import colorProp %}
<table class="sg-symbol-table">
<thead>
<tr>
<th>Preview</th>
<th>ID</th>
<th>Title ID</th>
<th>Original dimensions</th>
</tr>
</thead>
<tbody>
{% for symbol in symbols %}
<tr>
<td class="sg-svg-highlight">
{{ inlineSvg(symbol.symbolId, symbol.width, symbol.height, symbol.titleId, 'sg-symbol-table__preview', 'Arrow right' ) }}
</td>
<td>
<code>#{{symbol.symbolId}}</code>
</td>
<td>
<code>#{{symbol.titleId}}</code>
</td>
<td>
<code>{{symbol.width}}</code> × <code>{{symbol.height}}</code>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<p>Some SVGs have shapes that can be independently filled via the <code>--grav-co-svg-hl-*</code> custom properties. To visualise this, the above SVGs have such regions coloured in as follows:</p>
<ul class="sg-highlight-preview sg-svg-highlight">
<li>
{{ colorProp('--grav-co-svg-hl-1') | safe }}
</li>
<li>
{{ colorProp('--grav-co-svg-hl-2') | safe }}
</li>
<li>
{{ colorProp('--grav-co-svg-hl-3') | safe }}
</li>
</ul>
{
"text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam",
"url": "#",
"listItems": [
{
"htmlContent": "Some list item content"
},
{
"htmlContent": "More list item content"
},
{
"htmlContent": "Even more list item content"
},
{
"htmlContent": "I can't believe there's still more list item content"
},
{
"htmlContent": "Seriously?! That's enough now."
}
],
"footer": {
"copy": "© 2019 <strong>Buildit</strong>. All rights reserved.",
"linksA": [
{
"label": "Stories",
"url": "#"
},
{
"label": "People",
"url": "#"
},
{
"label": "Jobs",
"url": "#"
}
],
"linksB": [
{
"label": "Terms",
"url": "#"
},
{
"label": "Accessibility",
"url": "#"
},
{
"label": "Privacy & Cookie Policy",
"url": "https://wiprodigital.com/privacy-policy"
}
]
},
"hero": {
"pullout": "Big, attention-grabbing headline",
"paragraph": "Witty subtitle",
"cta": {
"text": "Clickbaity label",
"url": "#"
}
},
"img": {
"random": {
"src": "/images/img-random-1.png",
"alt": "A placeholder image with an arbitrary aspect ratio."
},
"square": {
"src": "/images/img-1x1.png",
"alt": "A placeholder image with a perfect square (1:1) aspect ratio."
},
"tv": {
"src": "/images/img-4x3.png",
"alt": "A placeholder image with a 4:3 aspect ratio, like an old TV."
},
"widescreen": {
"src": "/images/img-16x9.png",
"alt": "A placeholder image with a 16:9 aspect ratio, like a widescreen TV."
},
"logo": {
"src": "/images/img-random-2.png",
"alt": "A test image for a logo with an arbitrary aspect ratio."
}
},
"title": "Page title",
"header": {
"url": "./homepage",
"links": [
{
"text": "Jobs",
"url": "./jobs"
},
{
"text": "Locations",
"url": "./locations"
}
],
"externalLinks": [
{
"text": "Fancy external website",
"url": "./error-page"
}
]
},
"sections": [
{
"title": "Example section",
"class": "grav-o-full-bleed__content",
"content": [
{
"paragraph": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."
}
]
}
],
"section": {
"title": "This is the title for a section",
"class": "grav-o-full-bleed__content",
"content": [
{
"paragraph": "Paragraph lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
},
{
"blockquote": "Blockquote lorem ipsum dolor sit amet, consectetur adipisicing elit"
},
{
"twoColumnsList": [
{
"htmlContent": "Vestibulum auctor dapibus neque."
},
{
"htmlContent": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
},
{
"htmlContent": "Aliquam tincidunt mauris eu risus."
},
{
"htmlContent": "Labore et dolore magna aliqua."
},
{
"htmlContent": "Phasellus tempus, orci non mattis sagittis."
}
]
},
{
"inlineRow": [
{
"text": "First link",
"url": "#"
},
{
"text": "Second link",
"url": "#"
},
{
"text": "Third link",
"url": "#"
}
]
},
{
"imgCards": [
{
"title": "Some fascinating, attention-grabbing headling",
"content": "Ideally, with a click-baity tagline that entices to you to visit!",
"image": {
"src": "/images/img-random-1.png",
"alt": "Brief description of this fascinating image"
}
},
{
"title": "Labore et dolore magna aliqua",
"content": "Vestibulum pharetra arcu enim, nec porttitor quam ullamcorper et. Phasellus tempus, orci non mattis sagittis, lectus erat fringilla odio, nec auctor erat augue quis eros.",
"image": {
"src": "/images/img-random-1.png",
"alt": "Phasellus tempus, orci non mattis"
}
},
{
"title": "Nanotechnology immersion along the information highway",
"content": "Leverage agile frameworks to provide a robust synopsis for high level overviews.",
"image": {
"src": "/images/img-random-1.png",
"alt": "Bring to the table win-win survival strategies"
}
}
]
},
{
"imgLinks": [
{
"url": "#",
"image": {
"src": "/images/img-random-1.png",
"alt": "Image linke #1"
}
},
{
"url": "#",
"image": {
"src": "/images/img-random-2.png",
"alt": "Image linke #2"
}
},
{
"url": "#",
"image": {
"src": "/images/img-random-3.png",
"alt": "Image linke #3"
}
}
]
}
]
},
"category": "ui",
"symbols": [
{
"symbolId": "ui-arrow-right",
"titleId": "ui-arrow-right__title",
"width": "32px",
"height": "32px"
}
]
}
gravity-ui-web
provides all the logos and icons shown here, as SVG <symbol>
elements in the symbols.svg
file. The contents of that file must be inlined into your HTML document.
Then, whereever individual logos or icons need to be displayed, you can do so using the following markup:
<svg role="img">
<use xlink:href="#symbol-id"></use>
</svg>
Where #symbol-id
is taken from the ID column of the table shown in this stylegudie for the logo or icon you wish to display.
Without further styling, the logo or icon will appear as black (#000
) on a transparent background. However, you can use CSS to set the fill color to something else. For example:
#symbol-id {
fill: red;
}
Some of the available SVGs contain shapes that can be independently coloured. By default, they will all share the same current colour. However, you can selectively re-colour them via the --grav-co-svg-hl-1 / 2 / 3
custom properties. Refer to the preview tables in the pattern library to see what regions of an SVG those custom properties correspond to.
gravity-ui-web
uses an SVG icon system instead of an icon font. Furthermore, we use <symbols>
rather than <defs>
, so that we don’t need to specify the viewBox
each time a glyph is referenced. The benefits of this approach are covered in the CSS-Tricks Icon System with SVG Sprites article. Of particular appeal to us were the following:
The symbols.svg
SVG symbols file is generated at build time from individual SVG files in a folder. An accompanying symbols.json
file is generated that exposes all the available IDs and some associated meta-data.