mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-05 10:53:28 -05:00
SVG images will look sharper and scale more cleanly. However they are not supported on older browsers[1] > The <picture> element allows for fallback images when the browser > doesn't support a specified image format. `<picture>` is supported in the latest versions of Chrome, Firefox, IE (Edge), Safari and Android, so all these browsers will get the SVG version. Older browsers will fall back to the PNG version. [1] http://caniuse.com/#feat=svg [2] https://css-tricks.com/a-complete-guide-to-svg-fallbacks/#fallback-svg-as-img-picture [3] http://caniuse.com/#feat=SVG
41 lines
1.1 KiB
HTML
41 lines
1.1 KiB
HTML
{% extends "withoutnav_template.html" %}
|
||
{% from "components/textbox.html" import textbox %}
|
||
{% from "components/page-footer.html" import page_footer %}
|
||
{% from "components/banner.html" import banner_wrapper %}
|
||
|
||
{% block page_title %}
|
||
{{heading}} – GOV.UK Notify
|
||
{% endblock %}
|
||
|
||
{% block maincolumn_content %}
|
||
|
||
{% call banner_wrapper(type='tour') %}
|
||
<h2 class="heading-large">Add recipients</h2>
|
||
<p>
|
||
Add recipients by uploading a .csv spreadsheet:
|
||
</p>
|
||
<p>
|
||
<picture>
|
||
<source
|
||
type="image/svg+xml"
|
||
srcset="/static/images/tour/{{ current_page }}.svg"
|
||
alt="A screenshot of a spreadsheet containing data about three people"
|
||
width="554" height="118"
|
||
>
|
||
<img
|
||
src="/static/images/tour/{{ current_page }}.png"
|
||
width="554" height="118"
|
||
alt="A screenshot of a spreadsheet containing data about three people"
|
||
>
|
||
</picture>
|
||
</p>
|
||
<p>
|
||
Developers, you can add data automatically using an API
|
||
</p>
|
||
<a href='{{ url_for('.tour', service_id=service_id, page=next_page) }}'>
|
||
Next
|
||
</a>
|
||
{% endcall %}
|
||
|
||
{% endblock %}
|