Snippet examples
Adding an example snippet:
To add a snippet to your site you will need to follow these steps:
- Go to Structure -> Administer Snippets -> Add
- You will then want to add the name of the snippet(on this page) into the Administrative title field
- Click the source button on the text editor within the Snippet Content field.
- Copy and paste the code displayed on this page for your desired snippet into the Snippet Content field.
- Press save.
- Now your snippet should be addable to any page through the text editor option add snippet.
Here is a list of snippets that can be used on your site by adding them through the above method.
Primary Items
Primary Item styling.
This is used for the primary action of the page. Typically this should only be used once per page, as additional uses of it will result in diluting the importance of the primary action.
Primary Item - Download
<a class="action-item action-item--primary" href="{file}" target="_blank"><span class="action-item__icon icon icon-download"> </span>{downloadtext}</a>Primary Item - Email
<a class="action-item action-item--primary action-item--email" href="mailto:{emailaddress}">{emailaddresstext}</a>Primary Item - Phone
<span class="action-item action-item--phone action-item--primary">{threenumberextension} <strong>{internalnumber}</strong></span>Primary Item - Location
<a class="action-item action-item--primary" href="{locationlink}" target="_blank" title="Google Map"><span class="action-item__icon icon icon-map-marker"></span>{locationtext}</a>Primary Item - Project
<a class="action-item action-item--primary" href="{websitelink}"><span class="action-item__icon icon icon-line-chart"></span>{websitetext}</a>Primary Item - Website
<a class="action-item action-item--primary" href="{websitelink}"><span class="action-item__icon icon icon-globe"></span>{websitetext}</a>Primary Item - Twitter
<a class="action-item action-item--primary" href="{twitterlink}" target="_blank"><span class="action-item__icon icon icon-twitter"></span>{textlink}</a>Primary Item - Facebook
<a class="action-item action-item--primary" href="{fblink}" target="_blank"><span class="action-item__icon icon icon-facebook"></span>{textlink}</a>Secondary Items
Secondary Item styling.
This is used for the secondary action of the page. This can be used multiple times on a page, but only if there is multiple evenly weighted secondary level actions of a page. Otherwise inline text links should be used for any tertiary level action.
Secondary Item - Download
<a class="action-item action-item--shaded" href="{file}" target="_blank"><span class="action-item__icon icon icon-download"> </span>{downloadtext}</a>Secondary Item - Email
<a class="action-item action-item--shaded action-item--email" href="mailto:{emailaddress}">{emailaddresstext}</a>Secondary Item - Phone
<span class="action-item action-item--phone action-item--shaded">{threenumberextension} <strong>{internalnumber}</strong></span>Secondary Item - Location
<a class="action-item action-item--shaded" href="{locationlink}" target="_blank" title="Google Map"><span class="action-item__icon icon icon-map-marker"></span>{locationtext}</a>Secondary Item - Project
<a class="action-item action-item--shaded" href="{websitelink}"><span class="action-item__icon icon icon-line-chart"></span>{websitetext}</a>Secondary Item - Website
<a class="action-item action-item--shaded" href="{websitelink}"><span class="action-item__icon icon icon-globe"></span>{websitetext}</a>Secondary Item - Twitter
<a class="action-item action-item--shaded" href="{twitterlink}" target="_blank"><span class="action-item__icon icon icon-twitter"></span>{textlink}</a>Secondary Item - Facebook
<a class="action-item action-item--shaded" href="{fblink}" target="_blank"><span class="action-item__icon icon icon-facebook"></span>{textlink}</a>Layout
Layout styling.
These should be used to highlight relevant information within the body of content that otherwise could be lost, but most typically it would be placed within the aside of a page to better represent secondary information.
Pane Item - Shaded Title
Example Title
Example content
<div class="pane pane--shaded"><h2 class="pane__title">{title}</h2><p>{body}</p></div>Pane Item - Shaded No Title
Example content
<div class="pane pane--shaded"><p>{body}</p></div>Pane Item - Outline Title
Example title
Example content
<div class="pane pane--outline"><h2 class="pane__title">{title}</h2> <p>{body}</p></div>Pane Item - Outline No Title
Example content
<div class="pane pane--outline"><p>{body}</p></div>Pane Item - Ruled Title
Example Title
Example content
<div class="pane pane--ruled"><h2 class="pane__title">{title}</h2><p>{body}</p></div>Pane Item - Ruled No Title
Example content
<div class="pane pane--ruled"><p>{body}</p></div>Display Item - Name
Example display name
Example position
<p><strong>{displayname}</strong><br><em>{position}</em></p>Link Item - Arrow
<a class="arrow-link" href="{link}" target="_blank">{linktext}</a>