VGR Styleguide

File links with meta data 

<!-- Default -->
<p><a href="/" class="vgr-link vgr-link--pdf vgr-link--metadata">pdf link <span aria-label="filstorlek">(1 <abbr title="megabyte">MB</abbr>)</span></a></p>


<!-- Doc -->
<p><a href="/" class="vgr-link vgr-link--doc vgr-link--metadata">doc link <span aria-label="filstorlek">(125 <abbr title="kilobyte">kB</abbr>)</span></a></p>


<!-- Xls -->
<p><a href="/" class="vgr-link vgr-link--xls vgr-link--metadata">xls link <span aria-label="filstorlek">(10 <abbr title="megabyte">MB</abbr>)</span></a></p>


<!-- Zip -->
<p><a href="/" class="vgr-link vgr-link--zip vgr-link--metadata">zip link <span aria-label="filstorlek">(2 <abbr title="gigabyte">GB</abbr>)</span></a></p>


<!-- Image -->
<p><a href="/" class="vgr-link vgr-link--image vgr-link--metadata">image link <span aria-label="filstorlek">(1024 <abbr title="kilobyte">kB</abbr>)</span></a></p>


<!-- Sound -->
<p><a href="/" class="vgr-link vgr-link--sound vgr-link--metadata">sound link <span aria-label="filstorlek">(3 <abbr title="megabyte">MB</abbr>)</span></a></p>


<p><a href="{{ url }}" class="vgr-link vgr-link--{{ modifier }} vgr-link--metadata">{{ modifier }} link <span aria-label="{{ label }}">({{ text }} <abbr title="{{ abbreviation }}">{{ suffix }}</abbr>)</span></a></p>
 
/* Default */
{
  "url": "/",
  "modifier": "pdf",
  "label": "filstorlek",
  "text": "1",
  "suffix": "MB",
  "abbreviation": "megabyte"
}


/* Doc */
{
  "url": "/",
  "modifier": "doc",
  "label": "filstorlek",
  "text": "125",
  "suffix": "kB",
  "abbreviation": "kilobyte"
}


/* Xls */
{
  "url": "/",
  "modifier": "xls",
  "label": "filstorlek",
  "text": "10",
  "suffix": "MB",
  "abbreviation": "megabyte"
}


/* Zip */
{
  "url": "/",
  "modifier": "zip",
  "label": "filstorlek",
  "text": "2",
  "suffix": "GB",
  "abbreviation": "gigabyte"
}


/* Image */
{
  "url": "/",
  "modifier": "image",
  "label": "filstorlek",
  "text": "1024",
  "suffix": "kB",
  "abbreviation": "kilobyte"
}


/* Sound */
{
  "url": "/",
  "modifier": "sound",
  "label": "filstorlek",
  "text": "3",
  "suffix": "MB",
  "abbreviation": "megabyte"
}

There are no notes for this item.