Alpha

This is an alpha release of our documentation site. View the roadmap.

Asset hyperlink

Open example in a new tab
Test PDF 6.15 MB 
<a href="https://example.com">
  Test PDF
  <span class="cads-asset-type"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="cads-icon cads-icon--small cads-icon--file" focusable="false" aria-hidden="true">
      <path d="M13.364 15.973a.706.706 0 0 0 .707-.707V3.634a1.199 1.199 0 0 0-.35-.848L11.215.35A1.196 1.196 0 0 0 10.367 0H2.354a.706.706 0 0 0-.707.706v14.56a.706.706 0 0 0 .706.707h11.011zM12.301 14.2h-8.88V1.775H7.86v3.73a.706.706 0 0 0 .706.707h3.73l.006 7.987zm-.005-9.767-2.66.005V1.775h.465l2.195 2.127v.53z"/>
    </svg> 6.15 MB</span>
</a>
<%= render(
      CitizensAdviceComponents::AssetHyperlink.new(
        href: "https://example.com",
        description: "Test PDF",
        size: 6_444_516
      )
    )
%>

Using with Rails

If you are using the citizens_advice_components gem, you can call the component from within a template using:

<%= render(
      CitizensAdviceComponents::AssetHyperlink.new(
        href: "https://example.com",
        description: "Test PDF",
        size: 6_444_516
      )
    )
%>

Component arguments

Argument Description
Argument href Description Required, link to the asset
Argument description Description Required, description of the asset
Argument size Description Required, size in bytes