Overview
Introduction
A styleguide for the Media Democracy Fund website
Colors
Jumbo
Jumbo Text
Jumbo Text
Large
Large Text
Large Text
Medium
Medium Text
Medium Text
Subtitle
Subtitle Text
Subtitle Text
Paragraph
Medium Text
Medium Text
Small
Small Text
Small Text
Section Titles
Section Title
Section Title
Section Title
Section Title
Arrow
{% import 'macros/icon.html' as icon with context %}
{{ icon.svg(
{
name: 'arrow',
alt: 'arrow'
},
{
classes: ['o-icon', 'o-icon--arrow', 'o-icon--arrow-left']
}
) }}
{{ icon.svg(
{
name: 'arrow',
alt: 'arrow'
},
{
classes: ['o-icon', 'o-icon--arrow', 'o-icon--arrow-right']
}
) }}
{% import 'macros/icon.html' as icon with context %}
{{ icon.svg(
{
name: 'twitter',
alt: 'twitter'
},
{
classes: ['o-icon', 'o-icon--default', 'o-icon--twitter']
}
) }}
Priorities
Logos
Pagers
{% import 'macros/text.html' as text with context %}
{{ text.linkPrev(
{
link: {
linkUrl: '',
linkText: 'Prev',
linkTarget: false,
linkType: 'custom'
}
}
) }}
{{ text.linkPrev(
{
link: {
linkUrl: '',
linkText: 'Prev',
linkTarget: false,
linkType: 'custom'
}
},
{
modifiers: [ 'o-link-pager--disabled' ]
}
) }}
{{ text.linkNext(
{
link: {
linkUrl: '',
linkText: 'Next',
linkTarget: false,
linkType: 'custom'
}
}
) }}
{{ text.linkNext(
{
link: {
linkUrl: '',
linkText: 'Next',
linkTarget: false,
linkType: 'custom'
}
},
{
modifiers: [ 'o-link-pager--disabled' ]
}
) }}
Buttons
{% import 'macros/text.html' as text with context %}
{{ text.linkButtonOne(
{
link: {
linkUrl: '',
linkText: 'Button One',
linkTarget: false,
linkType: 'custom'
}
}
) }}
{{ text.linkButtonTwo(
{
link: {
linkUrl: '',
linkText: 'Button Two',
linkTarget: false,
linkType: 'custom'
}
}
) }}
{% import 'macros/text.html' as text with context %}
{{ text.linkButtonOne(
{
link: {
linkUrl: '',
linkText: 'Button One',
linkTarget: false,
linkType: 'custom'
}
}
) }}
{{ text.linkButtonSocial(
{
link: {
linkUrl: '',
linkText: 'Social Button',
linkTarget: false,
linkType: 'custom'
}
}
) }}
Card
{% import 'macros/post.html' as post with context %}
{{ post.card(
{
title: 'Card Title',
text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis',
_url: '#'
}
)}}
Item
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
{% import 'macros/post.html' as post with context %}
{{ post.item(
{
title: 'Post Title',
text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis',
_url: '#'
}
)}}
Priorities
{% import 'macros/priorities.html' as priorities %}
{% set items = [
{
title: 'Open Internet Defense',
text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elitqua. Ut enim ad minim veniam',
link: {
linkUrl: '#',
linkText: 'Link text',
linkTarget: false,
linkType: 'custom'
},
artwork: 'defense'
},
{
title: 'Title Lorem Ipsum',
text: 'Iusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam',
link: {
linkUrl: '#',
linkText: 'Link text',
linkTarget: false,
linkType: 'custom'
},
artwork: 'equity'
}
]
%}
{{ priorities.render(
{
items: items
}
)}}
Text
{% import 'macros/textSlideshow.html' as slideshow %}
{% set items = [
{
title: 'Title Lorem Ipsum',
text: 'Iusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
',
link: {
linkUrl: '#',
linkText: 'Link text',
linkTarget: false,
linkType: 'custom'
}
},
{
title: 'Another Title Lorem Ipsum',
text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
',
link: {
linkUrl: '#',
linkText: 'Link text',
linkTarget: false,
linkType: 'custom'
}
},
{
title: 'Third Title Lorem',
text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
',
link: {
linkUrl: '#',
linkText: 'Link text',
linkTarget: false,
linkType: 'custom'
}
}
]
%}
{{ slideshow.render(
{
items: items
}
)}}