diff --git a/README.md b/README.md
index 4b9a623ca..1e3719530 100644
--- a/README.md
+++ b/README.md
@@ -129,6 +129,45 @@ A light card with the image on the left:
%}
```
+### card-with-image-guides
+
+This component is a spin off of `card-with-image`, made for the unique case on `guides.html`, and outputs a card with a heading, icon, descriptive text, a link, and, optionally, a hero image. It was spun off from the "card-with-image" partial to accomodate the unique needs of the guides index page. The whole card is no longer a clickable link. In the future, these might be condensed back down into a single partial and class, but it will probably require some more conditional statements because the behaviors are so different.
+
+**Expected arguments**:
+
+`link_url` - the url the links on the card will link to (href).
+
+`image_path` - the path to the icon. Note that the partial will prepend the site baseurl. It should start with a leading forward slash (“/”).
+
+`text_content` - the text to be displayed next to the icon; the guide name
+
+`text_descrip` - the longer description to be displayed under the card heading
+
+**Optional arguments**:
+
+`card_color` - if set to `"dark"`, will make the card background the primary-dark color. Otherwise the background will default to a white color.
+
+`image_alt_text` - will be the alt text for the image. If this argument isn’t provided, alt text will be set to “” and screen readers will ignore the image.
+
+`image_side` - if set to `"right"`, will place the image on the right side of the card. Otherwise the image will default to the left side.
+
+`image_size` - if set to `"md"`, will set the max image size to 8 units. Otherwise the image will default to a max size of 6 units.
+
+`hero.url` - for guides where `promoted` == true, this will be the hero image for the card. Like the icon, the partial will prepend the site baseurl. It should start with a leading forward slash (“/”).
+
+**Example**
+A card on the guides index page that has a hero image. In the current implementation, these values are being brought in `guide.yml` as variables.
+```
+{% include card-with-image-guides.html
+ text_content="Design Methods"
+ text_descrip="Involve the people who will use your service in the design process."
+ link_url="https://guides.18f.gov/methods/"
+ image_path="/assets/img/guides/design-methods-darker.svg"
+ image_side="right"
+ hero_url="/assets/img/guides/design-methods-hero.svg"
+%}
+```
+
### featured-posts
This component outputs a list of blog post previews to be displayed on pages other than the blog. Each preview will take up 12 columns on mobile screens, 6 columns on tablet screens, and 4 columns on screens larger than a tablet.
diff --git a/_data/guides.yml b/_data/guides.yml
index 3f315a161..16b6b8597 100644
--- a/_data/guides.yml
+++ b/_data/guides.yml
@@ -1,47 +1,73 @@
+#"promoted" is being used for layout, and per the design, it should only be set to true for two guides at a time
+
- name: "Accessibility"
link: "https://guides.18f.gov/accessibility"
+ description: "Make websites more accessible so everyone can use them."
+ promoted: false
image:
light: "/assets/img/guides/accessibility-lightest.svg"
dark: "/assets/img/guides/accessibility-darker.svg"
+ hero: ""
- name: "Agile"
link: "https://guides.18f.gov/agile/"
+ description: "Move toward an agile approach to stay within budget and provide value to the public."
+ promoted: false
image:
light: "/assets/img/guides/agile-lightest.svg"
dark: "/assets/img/guides/agile-darker.svg"
+ hero: ""
- name: "Content"
link: "https://guides.18f.gov/content-guide/"
+ description: "Create content in plain language to help the public save time and build trust."
+ promoted: false
image:
light: "/assets/img/guides/content-lightest.svg"
dark: "/assets/img/guides/content-darker.svg"
+ hero: ""
-- name: "De-risking"
+- name: "Derisking"
link: "https://guides.18f.gov/derisking/"
+ description: "Save millions of dollars and reduce risk in your technology projects."
+ promoted: true
image:
light: ""
dark: "/assets/img/guides/derisking-darker.svg"
+ hero: "/assets/img/guides/derisking-hero.svg"
- name: "Design Methods"
link: "https://guides.18f.gov/methods/"
+ description: "Involve the people who will use your service in the design process."
+ promoted: true
image:
light: ""
dark: "/assets/img/guides/design-methods-darker.svg"
+ hero: "/assets/img/guides/design-methods-hero.svg"
- name: "Engineering"
link: "https://guides.18f.gov/engineering"
+ description: "Develop secure software in the cloud, which can reduce costs and scale to meet public need."
+ promoted: false
image:
light: ""
dark: "/assets/img/guides/engineering-darker.svg"
+ hero: ""
- name: "Product"
link: "https://guides.18f.gov/product"
+ description: "Support a team to deliver the right product to the right audience."
+ promoted: false
image:
light: "/assets/img/guides/product-lightest.svg"
dark: "/assets/img/guides/product-darker.svg"
+ hero: ""
- name: "User Experience"
link: "https://guides.18f.gov/ux-guide/"
+ description: "Make your products and services work for the people that use them."
+ promoted: false
image:
light: "/assets/img/guides/ux-lightest.svg"
dark: "/assets/img/guides/ux-darker.svg"
+ hero: ""
diff --git a/_includes/card-with-image-guides.html b/_includes/card-with-image-guides.html
new file mode 100644
index 000000000..178a9bd29
--- /dev/null
+++ b/_includes/card-with-image-guides.html
@@ -0,0 +1,59 @@
+{% comment %}
+This partial outputs a card with a heading, icon, descriptive text, a link, and, optionally, a hero image.
+It was spun off from the "card-with-image" partial to accomodate the unique needs of the guides index page.
+The whole card is no longer a clickable link. In the future, these might be condensed back down
+into a single partial and class, but it will probably require some more conditional statements
+because the behaviors are so different.
+
+The expected arguments for this partial are:
+link_url - the url the links on the card will link to (href)
+image_path - the path to the image, note that the partial will prepend the site baseurl
+text_content - the text to be displayed next to the image; the guide name
+text_descrip - the longer description to be displayed under the card heading
+
+Optional arguments:
+card_color - if set to "dark" will make the card background the primary-dark color. Otherwise will default to a white background.
+image_alt_text - will be the alt text for the image. If this argument isn’t provided alt text will be set to “” and the image will be ignored by screen readers.
+image_side - if set to "right" will place the image on the right side of the card. Otherwise the image will default to the left side.
+image_size - if set to "md" will set the max image size to 8 units. Otherwise the image will default to a max size of 6 units.
+hero.url - for guides where "promoted" = true, this will be the hero image for the card.
+{% endcomment %}
+
+
+ 
+ {% endcapture %}
+
+ {% capture card_text %}
+