Buildit Gravity pattern library

Inline Svg Symbol 

<svg role="img" aria-labelledby="logo-gravity__title" width="32" height="19">
    <use xlink:href="#logo-gravity"></use>
</svg>
 
{%- macro inlineSvg(symbolId, width, height, titleId, class, customLabel) -%}
<svg role="img"
  {%- if class %} class="{{class}}"{%- endif -%}
  {%- if customLabel %} aria-label="{{customLabel}}"
  {%- elif titleId %} aria-labelledby="{{titleId}}"
  {# The built-in symbols use __title as a suffix #}
  {%- else %} aria-labelledby="{{symbolId}}__title"{%- endif %} width="{{width}}" height="{{height}}">
  <use xlink:href="#{{symbolId}}"></use>
</svg>
{%- endmacro -%}

{{- inlineSvg(symbolId, width, height, titleId, class) | safe -}}
 
{
  "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": "&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"
            }
          }
        ]
      }
    ]
  },
  "symbolId": "logo-gravity",
  "width": "32",
  "height": "19"
}

Purpose

Displays an SVG <symbol> defined elsewhere in the document. The desired symbol is referenced by its id. Semantically, this element is equivalnet to HTML’s <img> element. Additionally, the fill color of the graphic is set to inherit the current CSS color of the parent element - in other words, the shape’s color will match that of surrounding text automatically.

Note: Unless the referenced SVG symbol is being used for decorative purposes, it must have a <title> element with an id attribute, containing the text alternative (equivalent to the alt attribute on <img>). This is referenced by the aria-labelledby attribute in order to provide a text alternative for the inlined SVG.

Note: Most browsers will give this UI element a default size of 300px × 150px (the default for “replaced elements”), unless you override it via CSS. This will happen regardless of the referenced <symbol>‘s viewBox attribute value. Instead, the referenced <symbol>‘s aspect ratio will be preserved but, it will be scaled to fit the size of the outer <svg> container. If you set width and height attributes on the outer <svg> container, then they will set the intrinsic size. After that, scaling behaves just like it would for an <img> (e.g. settings a different width via CSS, will scale the image proportionally).

Background

While it is possible to use <img src="some-image.svg" alt="Amazing SVG image!"> to display SVG images (just as you would for any other image format), SVGs can also be inlined directly into the HTML. Assuming the inlined SVG is indeed a visible picture and thus semantcially equivalent to the HTML <img> element, a role="img" attribute should be added to indicate that.

One of the main reasons for inlining SVGs, is that the page’s CSS can also style the SVG. This is especially useful for icons and logos. Combined with SVG’s ability to define re-usable objects as <symbols> and then reference them via the <use> element, this has become the preferred way to create icon systems as it offers many benefits over icon fonts.

Usage in Gravity

Gravity’s gravity-ui-web library provides a range of logos and icons as SVG <symbol>s in its symbols.svg file, which is intended to be inlined into HTML documents. This UI element is then used to display one of the available symbols.

Refer to Particles > Logos and Icons > SVG symbols for a complete list of all available logos and icons and their respective IDs.

Highlight colours

In addition to the default fill colour matching the text colour of wherever the inline SVG is used, Gravity allows SVG symbols to use up to 3 additional highlight fill colours. This enables SVGs to colour in parts of themselves. To do so, the SVG’s elements may use the following classes:

Class name Effect
.grav-svg-hl-1 Sets the fill colour of that element to Gravity’s group B accent colour.
.grav-svg-hl-2 Sets the fill colour of that element to Gravity’s group B alternative control colour.
.grav-svg-hl-3 Sets the fill colour of that element to Gravity’s group B attention accent colour.

What colour value those colour purposes resolve to is determined by what colour scheme is being applied to the page (area) the SVG is inlined into.

See also