Asset hyperlink
<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 |
Questions and contributions
For National Citizens Advice staff you can find us in the #design-system channel on Slack. For open issues, roadmap, and source code see the GitHub project.