cupper-hugo-theme/content/patterns/landmarks/example2.md

63 lines
3.2 KiB
Markdown
Raw Normal View History

2017-06-09 15:27:09 +02:00
+++
2017-06-15 10:41:44 +02:00
title = "Landmark Example 2"
2017-06-09 15:27:09 +02:00
wcag = ["1-1-1"]
+++
<p>Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Maecenas sit amet tellus nec mi gravida posuere non pretium magna. <strong>Donec a congue leo. </strong></p>
2017-06-15 10:41:44 +02:00
{{< codePen VpVNKW >}}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit <em>amet tellus</em> nec mi gravida posuere non <a href='#'>pretium magna</a>. Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Donec tempus tempus tellus, ac <abbr title='Hypertext Markup Language'>HTML</abbr> lacinia turpis mattis ac. Suspendisse potenti. Nunc iaculis risus vel orci ornare dignissim sed vitae nulla. Donec a congue leo? Fusce ac sodales <abbr title='Cascading Style Sheets'>CSS</abbr> magna. </p>
[Link to widgets example 1]({{< ref "patterns/widgets/example1.md" >}})
## Figure example
{{% figure caption="You are <em>wrong</em>." %}}
I LOVE FASCISM!?
{{% /figure %}}
2017-06-09 15:27:09 +02:00
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit <em>amet tellus</em> nec mi gravida posuere non <a href='#'>pretium magna</a>. Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Donec tempus tempus tellus, ac <abbr title='Hypertext Markup Language'>HTML</abbr> lacinia turpis mattis ac. Suspendisse potenti. Nunc iaculis risus vel orci ornare dignissim sed vitae nulla. Donec a congue leo? Fusce ac sodales <abbr title='Cascading Style Sheets'>CSS</abbr> magna. </p>
2017-06-15 10:41:44 +02:00
{{% figure caption="This is good news." %}}
I HATE FASCISM!?
{{% /figure %}}
## Code block example
{{<codeBlock lang="css" numbered="true">}}
.expandable + .expandable {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 2px solid;
}
.expandable + .expandable {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 2px solid;
}
.expandable + .expandable {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 2px solid;
}
{{</codeBlock>}}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit <em>amet tellus</em> nec mi gravida posuere non <a href='#'>pretium magna</a>. Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Donec tempus tempus tellus, ac <abbr title='Hypertext Markup Language'>HTML</abbr> lacinia turpis mattis ac. Suspendisse potenti. Nunc iaculis risus vel orci ornare dignissim sed vitae nulla. Donec a congue leo? Fusce ac sodales <abbr title='Cascading Style Sheets'>CSS</abbr> magna. </p>
## External refs examples
### WCAG
{{% wcag include="1.1.1, 4.1.2, 1.3.1" descriptions="true" %}}
### Inclusive Design Principles
{{% principles include="add value, Be consistent" descriptions="true" %}}
{{% expandable level="2" label="Another expandable" %}}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit <em>amet tellus</em> nec mi gravida posuere non <a href='#'>pretium magna</a>. Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Donec tempus tempus tellus, ac <abbr title='Hypertext Markup Language'>HTML</abbr> lacinia turpis mattis ac. Suspendisse potenti. Nunc iaculis risus vel orci ornare dignissim sed vitae nulla.</p>
{{% /expandable %}}