Markdown and HTML snippets to use in page content

Here are some helpful code snippets if you want to spruce up your content presentation.

Images

First, you will have to upload your image to the images folder.

Your image file name must not use any spaces!

Next, in your markdown file, past the following:

![write alt text here]({{site.baseurl}}/images/IMAGE_NAME)

You will need to write the alt text to describe, then replace IMAGE_NAME with the file name and extension of your image. This should not be in all caps. A real-world example would look something like:

![screen shot of design pattern]({{site.baseurl}}/images/pattern.jpg)

Do/Don’t match-ups

Copy and paste the code in the box below, writing only where indicated. DO NOT indent or the markdown formatting will be lost.

<div class="do-dont">
<div class="do-dont__do">
<h3 class="do-dont__heading">Do</h3>
<div class="do-dont__content" markdown="1">
WRITE YOUR MARKDOWN HERE FOR DOS
</div>
</div>
<div class="do-dont__dont">
<h3 class="do-dont__heading">Don’t</h3>
<div class="do-dont__content" markdown="1">
WRITE YOUR MARKDOWN HERE FOR DO-NOTS
</div>
</div>
</div>

Showcases

Showcases are used for displaying components against a white background, as they would expected to appear on VA.gov. The snippet uses Jekyll’s relative include tag to a simple located in the html folder of the current directory example.

You can use this code to display a showcase on your page.

<div class="site-showcase">
{% include_relative html/buttons-default.html %}
</div>

Code snippets

Code snippets are usually the same file that you would use in a showcase (noted above) to display the source code inside of an accordion.

You can use this code to display a code snippet on your page.

{% include snippet.html content='html/MY-HTML-FILE.html' %}

Code snippets use a standard include tag, but they always use the same snippet.html include file. The file for the snippet you'd like to display is passed as parameter named content.

Code snippet with React link

You can links to React versions of components using the react_component parameter.

{% include snippet.html content='html/accordions.html' react_component='https://department-of-veterans-affairs.github.io/veteran-facing-services-tools/visual-design/components/collapsiblepanel/' %}

Responsive previews

The responsive preview allows the user to explore what a component or pattern may look like on different devices without requiring the user to resize the browser. It is also a way to allow the user to see what something would look like on a wide screen from their mobile device.

{% include iframe-preview.html src="html/flexbox-grid-responsive.html" title="Flexbox grid" height=400 %}

Responsive previews use a standard include tag, but they always use the same iframe-preview.html include file. The file for the snippet you'd like to display is passed as parameter named src. There are also parameters for title and height. For the height parameter, you will have to adjust accordingly. Ideally, you'll want to choose a value that will not make the preview area overly tall, but contains what you want the user to see in each of the tabs.