Each variation will be presented in the following sections.
This is an intro text which can be used in every article component.
The article component is a wrap-with partial to give you the possibility to put in every content you need.
veams install vc article
bower install veams-component-article --save
String} [default] - Context class of component.String} - Modifier classes for component.String} - Classes for header element.String} - Classes for content div.String} - Classes for footer element.Object} - Object which contains multiple elementsString} - Date stringString} - Date attributeString} - Header H1String} - Header H2String} - Header H3String} - Header IntroObject} - Object which contains multiple elementsString} - Footer link{
"variations": {
"default": {
"docs": {
"variationName": "Article with all fields",
"sectionCenter": true
},
"settings": {
"articleContextClass": false,
"articleClasses": "is-bg-higlight-1",
"articleContentClasses": "is-visible",
"articleHeaderClasses": "is-header",
"articleFooterClasses": "is-margin"
},
"content": {
"articleHeader": {
"articleDate": "11/16/2016",
"articleH1": "Article Headline",
"articleH2": "Article Subline",
"articleIntro": "This is an intro text which can be used in every article component."
},
"articleFooter": {
"articleFooterLink": "#",
"articleFooterLinkText": "Footer Link in Article"
}
}
}
}
}
{{! WrapWith START: }}
{{#wrapWith "c-article" settings=this.settings content=this.content}}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aperiam architecto atque cupiditate dicta earum ex facilis harum incidunt, laboriosam officiis placeat quas recusandae, rerum, sit tempore tenetur. Impedit, velit.
{{/wrapWith}}
{{! WrapWith END: }}
/* ===================================================
ARTICLE COMPONENT
=================================================== */
/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-article"] {
/*
Header
----------------------- */
.article__header {
}
.article__header-time {
}
.article__header-headline {
}
.article__header-subline {
}
.article__header-intro {
}
/*
Content
----------------------- */
.article__content {
}
/*
Footer
----------------------- */
.article__footer {
}
.article__footer-link {
}
}
/* ---------------------------------------------------
Context: Default Example
--------------------------------------------------- */
.c-article--default {
/*
Header
----------------------- */
.article__header {
margin-bottom: 3rem;
}
.article__header-time {
font-size: 1.2rem;
}
.article__header-headline {
font-size: 2.8rem;
margin-bottom: 1.15rem;
}
.article__header-subline {
font-size: 2.2rem;
margin-bottom: .75rem;
}
.article__header-intro {
font-size: 2rem;
font-weight: 900;
}
.article__footer {
margin-top: 3rem;
}
}
<article class="c-article--default is-bg-higlight-1" data-css="c-article">
<header class="article__header is-header">
<time class="article__header-time" datetime="">11/16/2016</time>
<h1 class="article__header-headline">Article Headline</h1>
<h2 class="article__header-subline">Article Subline</h2>
<p class="article__header-intro">This is an intro text which can be used in every article component.</p>
</header>
<div class="article__content is-visible">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aperiam architecto atque cupiditate dicta earum ex facilis harum incidunt, laboriosam officiis placeat quas recusandae, rerum, sit tempore tenetur. Impedit, velit.
</div>
<footer class="article__footer is-margin">
<a class="article__footer-link" href="#">
Footer Link in Article
</a> </footer>
</article>