Skip to content

Commit

Permalink
Templatize hero
Browse files Browse the repository at this point in the history
  • Loading branch information
James Mejia committed Mar 14, 2024
1 parent ffab39b commit 83f4b41
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 14 deletions.
37 changes: 25 additions & 12 deletions _includes/hero.html
Original file line number Diff line number Diff line change
@@ -1,14 +1,27 @@
<section class="hero">
<h1 class="hero-message">
<span>Learn how to use</span>
<span>USWDS</span>
</h1>
<p class="under-hero">A tutorial project to learn about installing, compiling, and customizing with the U.S. Web Design System</p>
<section class="hero">
<h1 class="hero-message">
<span>{{ hero.heading_alt }}</span>
<span>{{ hero.heading }}</span>
</h1>
<p class="under-hero">
{{ hero.body }}
</p>
{% if hero.button_group %}
<div class="button-list">
<a class="button primary" href="#tutorial-start">Start the tutorial <span class="material-icons right" aria-hidden="true">arrow_forward</span></a>
<a class="button secondary" href="https://github.com/uswds/uswds-tutorial">View source on GitHub</a>

{% for button in hero.button_group %}
<a
class="button primary {% if secondary %}secondary{% endif %}"
href="{{ button.href }}">
{{ button.label }}
<span
class="material-icons right"
aria-hidden="true">arrow_forward</span>
</a>
{% endfor %}
</div>
</section>
<picture class="promo-art">
<img src="https://doodleipsum.com/700x700/outline" height="800" width="800" alt="a random doodle">
</picture>
{% endif %}
</section>
<picture class="promo-art">
<img src="https://doodleipsum.com/700x700/outline" height="800" width="800" alt="a random doodle">
</picture>
12 changes: 11 additions & 1 deletion index.html
Original file line number Diff line number Diff line change
@@ -1,10 +1,20 @@
---
layout: default
title: USWDS Tutorial
hero:
heading_alt: "Learn how to use"
heading: "USWDS"
body: "A tutorial project to learn about installing, compiling, and customizing with the U.S. Web Design System"
button_group:
- label: "Start the tutorial"
href": "#tutorial-start"
- label: "View source on GitHub"
href": "https://github.com/uswds/uswds-tutorial"
secondary: true
---

<header class="opener">
{% include "hero.html" %}
{% include "hero.html" with page.hero %}
</header>
<main id="tutorial-start">
{% include "sxs/part-intro.html" %}
Expand Down
11 changes: 10 additions & 1 deletion pages/02-extending/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,19 @@
layout: default
title: USWDS Tutorial
permalink: build
hero:
heading_alt: "Learn how to use"
heading: "USWDS"
body: "A tutorial project to learn about installing, compiling, and customizing with the U.S. Web Design System"
button_group:
- label: "Start the tutorial"
href": "#tutorial-start"
- label: "View source on GitHub"
href": "https://github.com/uswds/uswds-tutorial"
---

<header class="opener">
{% include "hero.html" %}
{% include "hero.html" with page.hero %}
</header>
<main id="tutorial-start">
We'll include Building exercises here.
Expand Down

0 comments on commit 83f4b41

Please sign in to comment.