VladPolskiy/canonical-design
1
0
Fork 0
mirror of https://github.com/canonical/canonical-design.git synced 2025-07-22 18:26:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: Use vanilla patterns and apply content changes

Browse Source
This commit is contained in:
Peter French
2025-02-27 20:54:25 +01:00
parent 704a84bf8b
commit 37213570a8
3 changed files with 215 additions and 317 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
static/sass/styles.scss
View File

@ -30,7 +30,3 @@
.article-image a img {
height: 100%;
}
.is-paper {
background: #f3f3f3;
}

253
templates/open-design/get-started-designers.html
View File

@ -1,6 +1,7 @@
{% extends "base.html" %}
{% from "_macros/vf_hero.jinja" import vf_hero %}
{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
{% block meta_title %}
Get started designers
@ -46,133 +47,79 @@
<hr class="p-rule is-fixed-width" />
<div class="u-fixed-width">
<div class="p-section--shallow">
<h2>Get started</h2>
<h2>Getting started</h2>
</div>
</div>
<div class="row--25-75">
<div class="col" role="list">
<hr class="p-rule--muted" />
<div class="col">
<div class="p-section--shallow">
<div class="row" role="listitem">
<div class="col-3 col-medium-3">
<p class="p-heading--5">1.&nbsp;&nbsp;&nbsp;Reflect on what skills you have to share</p>
</div>
<div class="col-6 col-medium-3">
<p>
<ol class="p-stepped-list--detailed">
<li class="p-stepped-list__item">
<h3 class="p-stepped-list__title p-heading--5">Reflect on what skills you have to share</h3>
<p class="p-stepped-list__content">
Whether you are a beginner or a seasoned designer, you have unique skills that can be helpful to share. Think technical skills, like proficiency with specific tools, as well as soft skills like great interviewing technique! Projects often share the type of skills they are looking for in their requests.
</p>
</div>
</div>
</div>
<hr class="p-rule--muted" />
<div class="p-section--shallow">
<div class="row" role="listitem">
<div class="col-3 col-medium-3">
<p class="p-heading--5">2.&nbsp;&nbsp;&nbsp;Consider your commitment</p>
</div>
<div class="col-6 col-medium-3">
<p>
</li>
<li class="p-stepped-list__item">
<h3 class="p-stepped-list__title p-heading--5">Consider your commitment</h3>
<p class="p-stepped-list__content">
It's important to understand how much time you can dedicate to a project to avoid getting overwhelmed or frustrated. Projects can require one-off contributions or demand long term involvement. There are paid contributions and pro-bono ones as well, so make sure to look for the details. Ask yourself what you feel comfortable with!
</p>
</div>
</div>
</div>
<hr class="p-rule--muted" />
<div class="p-section--shallow">
<div class="row" role="listitem">
<div class="col-3 col-medium-3">
<p class="p-heading--5">3.&nbsp;&nbsp;&nbsp;Understand the different types of contributions</p>
</div>
<div class="col-6 col-medium-3">
<p>
</li>
<li class="p-stepped-list__item">
<h3 class="p-stepped-list__title p-heading--5">Understand the different types of contributions</h3>
<p class="p-stepped-list__content">
Contributions go beyond coding, and also beyond designing a project's logo. Design contributions include translations, user research, journey mapping, accessibility considerations and more. Discover how diverse skills can make a difference.
</p>
</div>
</div>
</div>
<hr class="p-rule--muted" />
<div class="p-section--shallow">
<div class="row" role="listitem">
<div class="col-3 col-medium-3">
<p class="p-heading--5">4.&nbsp;&nbsp;&nbsp;Get familiar with the tools of the trade</p>
</div>
<div class="col-6 col-medium-3">
<p>
</li>
<li class="p-stepped-list__item">
<h3 class="p-stepped-list__title p-heading--5">Get familiar with the tools of the trade</h3>
<p class="p-stepped-list__content">
New tools can be daunting, and projects may have specific processes. GitHub is a key tool in the open source community. While not all projects require it, being familiar with GitHub is definitely advantageous!
</p>
</div>
</div>
</div>
<hr class="p-rule--muted" />
<div class="p-section--shallow">
<div class="row" role="listitem">
<div class="col-3 col-medium-3">
<p class="p-heading--5">5.&nbsp;&nbsp;&nbsp;Find your first project</p>
</div>
<div class="col-6 col-medium-3">
<p>
There are thousands of open source projects out there. It can be hard to find the one to contribute to, so many projects published on GitHub use tags like "good first issue" or specific requests like "UX testing needed". You can also consult job boards, like the one on the Open Design website. You don't have to be familiar with the project itself to be a valuable contributor, so don't be afraid to reach out to the maintainers if you feel like you have something to share!
</p>
</div>
</div>
</div>
<hr class="p-rule--muted" />
<div class="p-section--shallow">
<div class="row" role="listitem">
<div class="col-3 col-medium-3">
<p class="p-heading--5">6.&nbsp;&nbsp;&nbsp;Read about the project</p>
</div>
<div class="col-6 col-medium-3">
<p>
</li>
<li class="p-stepped-list__item">
<h3 class="p-stepped-list__title p-heading--5">Find your first project</h3>
<div class="p-stepped-list__content">
<p>
There are thousands of open source projects out there. It can be hard to find the one to contribute to, so many projects published on GitHub use tags like "good first issue" or specific requests like "UX testing needed". You can also consult job boards, like the one on the <a href="https://opensourcedesign.net/jobs/">Open Source Design</a> website. You don't have to be familiar with the project itself to be a valuable contributor, so don't be afraid to reach out to the maintainers if you feel like you have something to share!
</p>
<div class="p-cta-block">
<a href="https://contribute.design/">Explore diverse community projects</a>
</div>
</div>
</li>
<li class="p-stepped-list__item">
<h3 class="p-stepped-list__title p-heading--5">Read about the project</h3>
<p class="p-stepped-list__content">
Spend some time familiarizing yourself with the product or project and brand guidelines to ace your contribution. Think about what colors/fonts and tone of voice are preferred. Check out design systems, accessibility guidelines, and past user research for context. And don't forget to check their code of conduct if they have one!
</p>
</div>
</div>
</div>
<hr class="p-rule--muted" />
<div class="p-section--shallow">
<div class="row" role="listitem">
<div class="col-3 col-medium-3">
<p class="p-heading--5">7.&nbsp;&nbsp;&nbsp;Understand the assignment</p>
</div>
<div class="col-6 col-medium-3">
<p>
</li>
<li class="p-stepped-list__item">
<h3 class="p-stepped-list__title p-heading--5">Understand the assignment</h3>
<p class="p-stepped-list__content">
Most contributions require specific deliverables, so make sure you understand what is asked, look into specification documents or moodboards if provided. A lot of projects also have public roadmaps, check it out to find out what you can get involved with.
</p>
<p>
<p class="p-stepped-list__content">
If there are no specific tickets or bug requests, but you notice something you want to raise, do bring it to the maintainers before offering a solution!
</p>
</div>
</div>
</div>
<hr class="p-rule--muted" />
<div class="p-section--shallow">
<div class="row" role="listitem">
<div class="col-3 col-medium-3">
<p class="p-heading--5">8.&nbsp;&nbsp;&nbsp;Have fun and be patient</p>
</div>
<div class="col-6 col-medium-3">
<p>
</li>
<li class="p-stepped-list__item">
<h3 class="p-stepped-list__title p-heading--5">Have fun and be patient</h3>
<p class="p-stepped-list__content">
Contributing to projects can be rewarding and exciting, but also chaotic and time-consuming. Most projects are maintained by passionate volunteers, and it might take time to get feedback. Validation processes can also be lengthy and your submission might not make it to the final product. Regardless, the experience you will gain from participating is a positive in and of itself.
</p>
</div>
</div>
</div>
<hr class="p-rule--muted" />
<div class="p-section--shallow">
<div class="row" role="listitem">
<div class="col-3 col-medium-3">
<p class="p-heading--5">9.&nbsp;&nbsp;&nbsp;Know your worth</p>
</div>
<div class="col-6 col-medium-3">
<p>
</li>
<li class="p-stepped-list__item">
<h3 class="p-stepped-list__title p-heading--5">Know your worth</h3>
<p class="p-stepped-list__content">
Do not feel pressured to give more than you are comfortable with. Keep in mind that your time and expertise is valuable, and should not be exploited without you getting something in return, be it material for your portfolio or the satisfaction of doing something good for your community.
</p>
<p>
<p class="p-stepped-list__content">
You will likely have to educate other people on the value of design, and that's ok! Don't hesitate to ask for what you need.
</p>
</div>
</div>
</li>
</ol>
</div>
</div>
</div>
@ -195,66 +142,52 @@
</p>
</div>
<div class="col-3">
<p>Pentera maintainer</p>
<p class="u-text--muted">Open Source Maintainer</p>
</div>
</div>
</div>
</div>
</section>
<section class="p-section">
<hr class="p-rule is-fixed-width" />
<div class="u-fixed-width">
<div class="p-section--shallow">
<h2>FAQ</h2>
</div>
</div>
<div class="row--25-75">
<div class="col">
<div class="p-section--shallow">
<hr class="p-rule--muted" />
<div class="row">
<div class="col-3">
<h3 class="p-heading--5">Who owns my contributions?</h3>
</div>
<div class="col-6">
<p>
Understanding licensing is important when working on open source projects. There are different types of licenses commonly used, like GPL or MIT. It's important to check which one the project is using!
</p>
</div>
</div>
</div>
<div class="p-section--shallow">
<hr class="p-rule--muted" />
<div class="row">
<div class="col-3">
<h3 class="p-heading--5">Are contributions compensated?</h3>
</div>
<div class="col-6">
<p>
Many open-source projects welcome volunteer contributions, while some offer compensation or grants for specific design tasks. It all depends on the project's funding and goals, so there are opportunities for everyone to get involved and make a difference!
</p>
</div>
</div>
</div>
<div class="p-section--shallow">
<hr class="p-rule--muted" />
<div class="row">
<div class="col-3">
<h3 class="p-heading--5">Do I need to know how to code?</h3>
</div>
<div class="col-6">
<p>
Absolutely not! Your design skills, passion and creativity are what matter most. There are plenty of ways you can make a meaningful impact without writing a single line of code.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
{%- call(slot) vf_tiered_list(is_list_full_width_on_tablet=false) -%}
{%- if slot == 'title' -%}
<h2>FAQ</h2>
{%- endif -%}
<section class="p-section">
{%- if slot == 'list_item_title_1' -%}
<h3 class="p-heading--5">Who owns my contributions?</h3>
{%- endif -%}
{%- if slot == 'list_item_description_1' -%}
<p>
Understanding licensing is important when working on open source projects. There are different types of licenses commonly used, like GPL or MIT. It's important to check which one the project is using!
</p>
{%- endif -%}
{%- if slot == 'list_item_title_2' -%}
<h3 class="p-heading--5">Are contributions compensated?</h3>
{%- endif -%}
{%- if slot == 'list_item_description_2' -%}
<p>
Many open-source projects welcome volunteer contributions, while some offer compensation or grants for specific design tasks. It all depends on the project's funding and goals, so there are opportunities for everyone to get involved and make a difference!
</p>
{%- endif -%}
{%- if slot == 'list_item_title_3' -%}
<h3 class="p-heading--5">Do I need to know how to code?</h3>
{%- endif -%}
{%- if slot == 'list_item_description_3' -%}
<div class="p-section">
<p>
Absolutely not! Your design skills, passion and creativity are what matter most. There are plenty of ways you can make a meaningful impact without writing a single line of code.
</p>
</div>
{%- endif -%}
{%- endcall -%}
<section class="p-section--deep">
<hr class="p-rule is-fixed-width" />
<div class="u-fixed-width">
<div class="p-section--shallow">
@ -334,12 +267,4 @@
</div>
</div>
</section>
<hr class="p-rule is-fixed-width" />
<section class="p-strip is-deep">
<div class="u-fixed-width">
<h2 class="u-no-margin--bottom u-sv1">Have more questions?</h2>
<a class="p-heading--2" href="/sauce">Contact the Open Design Working group&nbsp;&rsaquo;</a>
</div>
</section>
{% endblock content %}

275
templates/open-design/get-started-maintainers.html
View File

@ -1,6 +1,7 @@
{% extends "base.html" %}
{% from "_macros/vf_hero.jinja" import vf_hero %}
{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
{% block meta_title %}
Open your project to design contributions
@ -29,93 +30,79 @@
{%- endif -%}
{% endcall -%}
<section class="p-section">
<div class="u-fixed-width">
<hr class="p-rule" />
{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=true, is_list_full_width_on_tablet=true) -%}
{%- if slot == 'title' -%}
<h2>How design contributions can help your project</h2>
{%- endif -%}
{%- if slot == 'description' -%}
<div class="p-section--shallow">
<h2>How design contributions can help your project</h2>
<p>
Opening your project to design contributions increase your chances to create something great, but also to build a more inclusive and engaged community.
</p>
</div>
</div>
<div class="row">
<div class="col-6 col-start-large-7">
<div class="p-section--shallow">
<p>
Opening your project to design contributions increase your chances to create something great, but also to build a more inclusive and engaged community.
</p>
</div>
{%- endif -%}
{%- if slot == 'list_item_title_1' -%}
<h3 class="p-heading--5">Improve usability and accessibility</h3>
{%- endif -%}
{%- if slot == 'list_item_description_1' -%}
<div class="p-section--shallow">
<p>Benefit from user-centric design that improves usability and accessibility.</p>
</div>
</div>
<div class="row--25-75">
<div class="col">
<div class="p-section--shallow">
<hr class="p-rule--muted" />
<div class="row">
<div class="col-3">
<h3 class="p-heading--5">Improve usability and accessibility</h3>
</div>
<div class="col-6">
<p>Benefit from user-centric design that improves usability and accessibility.</p>
</div>
</div>
</div>
<div class="p-section--shallow">
<hr class="p-rule--muted" />
<div class="row">
<div class="col-3">
<h3 class="p-heading--5">Include more diverse perspectives</h3>
</div>
<div class="col-6">
<p>Gain fresh, innovative ideas from designers with different backgrounds and expertise.</p>
</div>
</div>
</div>
<div class="p-section--shallow">
<hr class="p-rule--muted" />
<div class="row">
<div class="col-3">
<h3 class="p-heading--5">Create a recognisable identity</h3>
</div>
<div class="col-6">
<p>Consistent, high-quality design helps establish and maintain a strong visual identity.</p>
</div>
</div>
</div>
<div class="p-section--shallow">
<hr class="p-rule--muted" />
<div class="row">
<div class="col-3">
<h3 class="p-heading--5">Broaden your reach</h3>
</div>
<div class="col-6">
<p>Attract a broader range of contributors, boosting project visibility and support.</p>
</div>
</div>
</div>
<div class="p-section--shallow">
<hr class="p-rule--muted" />
<div class="row">
<div class="col-3">
<h3 class="p-heading--5">Create better documentation</h3>
</div>
<div class="col-6">
<p>Create more intuitive and beginner-friendly documentation.</p>
</div>
</div>
</div>
<div class="p-section--shallow">
<hr class="p-rule--muted" />
<div class="row">
<div class="col-3">
<h3 class="p-heading--5">Stay ahead of the curve</h3>
</div>
<div class="col-6">
<p>Stay ahead by continuously integrating design trends and best practices into your project.</p>
</div>
</div>
</div>
{%- endif -%}
{%- if slot == 'list_item_title_2' -%}
<h3 class="p-heading--5">Include more diverse perspectives</h3>
{%- endif -%}
{%- if slot == 'list_item_description_2' -%}
<div class="p-section--shallow">
<p>Gain fresh, innovative ideas from designers with different backgrounds and expertise.</p>
</div>
</div>
</section>
{%- endif -%}
{%- if slot == 'list_item_title_3' -%}
<h3 class="p-heading--5">Create a recognizable identity</h3>
{%- endif -%}
{%- if slot == 'list_item_description_3' -%}
<div class="p-section--shallow">
<p>Consistent, high-quality design helps establish and maintain a strong visual identity.</p>
</div>
{%- endif -%}
{%- if slot == 'list_item_title_4' -%}
<h3 class="p-heading--5">Broaden your reach</h3>
{%- endif -%}
{%- if slot == 'list_item_description_4' -%}
<div class="p-section--shallow">
<p>Attract a broader range of contributors, boosting project visibility and support.</p>
</div>
{%- endif -%}
{%- if slot == 'list_item_title_5' -%}
<h3 class="p-heading--5">Create better documentation</h3>
{%- endif -%}
{%- if slot == 'list_item_description_5' -%}
<div class="p-section--shallow">
<p>Create more intuitive and beginner-friendly documentation.</p>
</div>
{%- endif -%}
{%- if slot == 'list_item_title_6' -%}
<h3 class="p-heading--5">Stay ahead of the curve</h3>
{%- endif -%}
{%- if slot == 'list_item_description_6' -%}
<div class="p-section--shallow">
<p>Stay ahead by continuously integrating design trends and best practices into your project.</p>
</div>
{%- endif -%}
{%- endcall -%}
<section class="p-section">
<div class="u-fixed-width">
@ -126,7 +113,7 @@
<div class="p-equal-height-row has-divider-3">
<div class="p-equal-height-row__col">
<div class="p-equal-height-row__item">
<div class="p-image-container--3-2-on-small p-image-container--square-on-medium p-image-container--2-3-on-large u-hide--small">
<div class="p-image-container--2-3-on-large u-hide--small">
{{ image (
url="https://assets.ubuntu.com/v1/e55d59fa-research-testing.png",
alt="",
@ -140,9 +127,9 @@
</div>
<div class="p-equal-height-row__item">
<hr class="p-rule--highlight u-hide--medium u-hide--small" />
<h5 class="p-heading--5">Research and testing</h5>
<h3 class="p-heading--5">Research and testing</h3>
</div>
<p class="p-equal-height-row__item u-sv1">
<p class="p-equal-height-row__item">
Understanding your audience and how people interact with your project is key to creating meaningful products.
</p>
<div class="p-equal-height-row__item">
@ -153,7 +140,7 @@
</div>
<div class="p-equal-height-row__col">
<div class="p-equal-height-row__item">
<div class="p-image-container--3-2-on-small p-image-container--square-on-medium p-image-container--2-3-on-large u-hide--small">
<div class="p-image-container--2-3-on-large u-hide--small">
{{ image(url="https://assets.ubuntu.com/v1/ab3113a4-user-flows.png",
alt="",
width="852",
@ -167,7 +154,7 @@
<hr class="p-rule--highlight u-hide--medium u-hide--small" />
<h5 class="p-heading--5">User flows</h5>
</div>
<p class="p-equal-height-row__item u-sv1">
<p class="p-equal-height-row__item">
Mapping how users should move from one point to another helps streamline experiences.
</p>
<div class="p-equal-height-row__item">
@ -178,7 +165,7 @@
</div>
<div class="p-equal-height-row__col">
<div class="p-equal-height-row__item">
<div class="p-image-container--3-2-on-small p-image-container--square-on-medium p-image-container--2-3-on-large u-hide--small">
<div class="p-image-container--2-3-on-large u-hide--small">
{{ image(url="https://assets.ubuntu.com/v1/1f8e1bb8-visuals.png",
alt="",
width="852",
@ -192,7 +179,7 @@
<hr class="p-rule--highlight u-hide--medium u-hide--small" />
<h5 class="p-heading--5">Visuals</h5>
</div>
<p class="p-equal-height-row__item u-sv1">Beautiful graphics make the difference between good and great software.</p>
<p class="p-equal-height-row__item">Beautiful graphics make the difference between good and great software.</p>
<div class="p-equal-height-row__item">
<a href="/brand">
<p aria-label="Learn more about our brand">Learn more&nbsp;&rsaquo;</p>
@ -201,7 +188,7 @@
</div>
<div class="p-equal-height-row__col">
<div class="p-equal-height-row__item">
<div class="p-image-container--3-2-on-small p-image-container--square-on-medium p-image-container--2-3-on-large u-hide--small">
<div class="p-image-container--2-3-on-large u-hide--small">
{{ image(url="https://assets.ubuntu.com/v1/298ccdad-design-systems.png",
alt="",
width="852",
@ -215,7 +202,7 @@
<hr class="p-rule--highlight u-hide--medium u-hide--small" />
<h5 class="p-heading--5">Design systems</h5>
</div>
<p class="p-equal-height-row__item u-sv1">
<p class="p-equal-height-row__item">
Strong design systems speed up design and development and create coherent end-to-end experiences.
</p>
<div class="p-equal-height-row__item">
@ -245,7 +232,7 @@
</p>
</div>
<div class="col-3">
<p>Anonymous respondent, open design survey</p>
<p class="u-text--muted">Anonymous respondent, open design survey</p>
</div>
</div>
</div>
@ -255,7 +242,7 @@
<section class="p-section">
<hr class="p-rule is-fixed-width" />
<div class="u-fixed-width">
<div class="p-section">
<div class="p-section--shallow">
<h2>Championing design in the open source community</h2>
</div>
<div class="p-logo-section">
@ -272,7 +259,7 @@
</div>
<div class="p-logo-section__item">
{{ image(url="https://assets.ubuntu.com/v1/150f79be-btc-logo.png",
alt="",
alt="BTC",
width="186",
height="312",
hi_def=True,
@ -295,62 +282,52 @@
</div>
</section>
<section class="p-section">
<hr class="p-rule is-fixed-width" />
<div class="p-section--shallow">
<div class="u-fixed-width">
<h2>Share your project with designers</h2>
{%- call(slot) vf_tiered_list(is_list_full_width_on_tablet=false) -%}
{%- if slot == 'title' -%}
<h2>Share your project with designers</h2>
{%- endif -%}
{%- if slot == 'list_item_title_1' -%}
<h3 class="p-heading--5">Add design requests to your projects</h3>
{%- endif -%}
{%- if slot == 'list_item_description_1' -%}
<div class="p-section--shallow">
<p>
Highlight design-oriented requests on your GitHub projects using dedicated tags and design-oriented brief templates.
</p>
</div>
</div>
<div class="row--25-75">
<div class="col">
<hr class="p-rule--muted" />
<div class="row">
<div class="col-3">
<h3 class="p-heading--5">Add design requests to your projects</h3>
</div>
<div class="col-6">
<div class="p-section--shallow">
<p>
Highlight design-oriented requests on your GitHub projects using dedicated tags and design-oriented brief templates.
</p>
</div>
<div class="p-cta-block">
<a href="https://docs.google.com/document/d/11kQqpy4WqvqYDe9VS547uoTI4CfXriaBhTQMhYR5uo0/edit">Write designer-friendly briefs&nbsp;&rsaquo;</a>
</div>
</div>
</div>
<hr class="p-rule--muted" />
<div class="row">
<div class="col-3">
<h3 class="p-heading--5">Post your project on Open Design</h3>
</div>
<div class="col-6">
<div class="p-section--shallow">
<p>Amplify your project's reach by sharing it on the Open Design board.</p>
</div>
<div class="p-cta-block">
<a href="https://contribute.design/">Post your project&nbsp;&rsaquo;</a>
</div>
</div>
</div>
<hr class="p-rule--muted" />
<div class="row">
<div class="col-3">
<h3 class="p-heading--5">Get in touch with us</h3>
</div>
<div class="col-6">
<div class="p-section--shallow">
<p>Do you have an open source project that needs design contributions?</p>
</div>
<div class="p-cta-block">
<a href="/sauce">Let us know!</a>
</div>
</div>
</div>
<div class="p-cta-block">
<a href="https://docs.google.com/document/d/11kQqpy4WqvqYDe9VS547uoTI4CfXriaBhTQMhYR5uo0/edit">Write designer-friendly briefs&nbsp;&rsaquo;</a>
</div>
</div>
</section>
{%- endif -%}
{%- if slot == 'list_item_title_2' -%}
<h3 class="p-heading--5">Post your project on Open Design</h3>
{%- endif -%}
{%- if slot == 'list_item_description_2' -%}
<div class="p-section--shallow">
<p>Amplify your project's reach by sharing it on the Open Design board.</p>
</div>
<div class="p-cta-block">
<a href="https://contribute.design/">Post your project&nbsp;&rsaquo;</a>
</div>
{%- endif -%}
{%- if slot == 'list_item_title_3' -%}
<h3 class="p-heading--5">Get in touch with us</h3>
{%- endif -%}
{%- if slot == 'list_item_description_3' -%}
<div class="p-section--shallow">
<p>Do you have an open source project that needs design contributions?</p>
</div>
<div class="p-cta-block">
<a href="/sauce">Let us know!</a>
</div>
{%- endif -%}
{%- endcall -%}
<section class="p-section--deep">
<hr class="p-rule is-fixed-width" />