<div class='feed'>
<div class='feed-header'>
<div class='feed-header-title'>
<span class="icon fas fa-users " aria-hidden="true"></span>
<h3 class="heading feed-header-title-text">
Prikbord
</h3>
</div>
<div class='feed-header-action'>
<a href="#" class="link " aria-label="" title="Bekijk alle berichten">
<span class="text">Bekijk alle berichten</span>
</a>
</div>
</div>
<div class='feed-body'>
<div class='feed-message'>
<div class='feed-message-header'>
<div class='feed-message-header-avatar-author'>
<div class="avatar avatar-red feed-message-header-avatar">
<span>ET</span>
</div>
<span class='feed-message-header-author'>
Albert Verscheuven
</span>
</div>
<span class='feed-message-header-time'>
15u45
</span>
<span class="tag tag-red-round tag-sm">
Populair
</span>
</div>
<div class='feed-message-body'>
<h3 class="heading feed-message-body-title">
Titel van bericht
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non mi lorem. Ut efficitur enim quis purus hendrerit bibendum. Ut quam felis, tincidunt vel eros eu, ornare tincidunt metus.
</p>
</div>
<div class='feed-message-footer'>
<span class='feed-message-footer-col feed-message-footer-like'>
<div class='item-toggle'>
<input class='item-toggle-input' type='checkbox' id='like1' name='like1' value='like' />
<label for='like1' class='icon-checked'>
<span class="icon fas fa-thumbs-up " aria-hidden="true"></span>
<span class="label-text">Like</span>
</label>
<label for='like1' class='icon-unchecked'>
<span class="icon fal fa-thumbs-up " aria-hidden="true"></span>
<span class="label-text">Like</span>
</label>
</div>
</span>
<span class='feed-message-footer-col feed-message-footer-react'>
<button class="link link-secondary" aria-label="" title="Reageer">
<span class="icon fas fa-comment-alt-lines " aria-hidden="true"></span>
<span class="text">Reageer</span>
</button>
</span>
<span class='feed-message-footer-col feed-message-footer-reactions'>
<button class="link link-secondary" aria-label="" title="12 reacties">
<span class="text">12 reacties</span>
</button>
</span>
</div>
</div>
<div class='feed-message'>
<div class='feed-message-header'>
<div class='feed-message-header-avatar-author'>
<div class="avatar avatar-red feed-message-header-avatar">
<span>ET</span>
</div>
<span class='feed-message-header-author'>
Albert Verscheuven
</span>
</div>
<span class='feed-message-header-time'>
15u45
</span>
</div>
<div class='feed-message-body'>
<h3 class="heading feed-message-body-title">
Titel van bericht
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non mi lorem. Ut efficitur enim quis purus hendrerit bibendum. Ut quam felis, tincidunt vel eros eu, ornare tincidunt metus.
</p>
</div>
<div class='feed-message-footer'>
<span class='feed-message-footer-col feed-message-footer-like'>
<div class='item-toggle'>
<input class='item-toggle-input' type='checkbox' id='like2' name='like2' value='like' />
<label for='like2' class='icon-checked'>
<span class="icon fas fa-thumbs-up " aria-hidden="true"></span>
<span class="label-text">Like</span>
</label>
<label for='like2' class='icon-unchecked'>
<span class="icon fal fa-thumbs-up " aria-hidden="true"></span>
<span class="label-text">Like</span>
</label>
</div>
</span>
<span class='feed-message-footer-col feed-message-footer-react'>
<button class="link link-secondary" aria-label="" title="Reageer">
<span class="icon fas fa-comment-alt-lines " aria-hidden="true"></span>
<span class="text">Reageer</span>
</button>
</span>
<span class='feed-message-footer-col feed-message-footer-reactions'>
<button class="link link-secondary" aria-label="" title="12 reacties">
<span class="text">12 reacties</span>
</button>
</span>
</div>
</div>
</div>
<div class='feed-footer'>
<a title="Bericht toevoegen" href="#" class="button button-red ">
<span>
<span class="text">
Bericht toevoegen
</span>
</span>
</a>
</div>
</div>
<div class='feed'>
<div class='feed-header'>
<div class='feed-header-title'>
{{render '@icon' icon}}
{{render '@heading' title}}
</div>
{{#if secondaryAction}}
<div class='feed-header-action'>
{{render '@link' secondaryAction}}
</div>
{{/if}}
</div>
<div class='feed-body'>
{{#each messages as |message|}}
{{render '@feed-message' message}}
{{/each}}
</div>
{{#if primaryAction}}
<div class='feed-footer'>
{{render '@button' primaryAction}}
</div>
{{/if}}
</div>
{
"icon": {
"icon": "fa-users",
"style": "fas"
},
"title": {
"text": "Prikbord",
"tag": "h3",
"modifier": "feed-header-title-text"
},
"primaryAction": {
"modifier": "red",
"noframe": false,
"text": "Bericht toevoegen",
"element": "a",
"type": "",
"title": "Bericht toevoegen",
"target": "",
"href": "#",
"id": "",
"iconBefore": false,
"isDisabled": false
},
"secondaryAction": {
"modifier": "",
"element": "a",
"href": "#",
"title": "Bekijk alle berichten",
"aria_label": "",
"text": "Bekijk alle berichten",
"isExternal": false,
"extIcon": false,
"action": false
},
"messages": [
{
"avatar": {
"firstLetter": "E",
"lastLetter": "T",
"modifier": "red feed-message-header-avatar"
},
"author": "Albert Verscheuven",
"time": "15u45",
"tag": {
"modifier": "tag-red-round",
"size": "tag-sm",
"element": "span",
"text": "Populair"
},
"title": {
"text": "Titel van bericht",
"tag": "h3",
"modifier": "feed-message-body-title"
},
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non mi lorem. Ut efficitur enim quis purus hendrerit bibendum. Ut quam felis, tincidunt vel eros eu, ornare tincidunt metus.",
"like": {
"id": "like1",
"name": "like1",
"value": "like",
"text": "Like",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-thumbs-up"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-thumbs-up"
}
},
"checked": false,
"disabled": false
},
"react": {
"modifier": "link-secondary",
"element": "button",
"href": false,
"title": "Reageer",
"aria_label": "",
"text": "Reageer",
"isExternal": false,
"iconBefore": {
"icon": "fa-comment-alt-lines",
"style": "fas"
}
},
"reactions": {
"modifier": "link-secondary",
"element": "button",
"href": false,
"title": "12 reacties",
"aria_label": "",
"text": "12 reacties",
"isExternal": false,
"extIcon": false,
"action": false
}
},
{
"avatar": {
"firstLetter": "E",
"lastLetter": "T",
"modifier": "red feed-message-header-avatar"
},
"author": "Albert Verscheuven",
"time": "15u45",
"tag": false,
"title": {
"text": "Titel van bericht",
"tag": "h3",
"modifier": "feed-message-body-title"
},
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non mi lorem. Ut efficitur enim quis purus hendrerit bibendum. Ut quam felis, tincidunt vel eros eu, ornare tincidunt metus.",
"like": {
"id": "like2",
"name": "like2",
"value": "like",
"text": "Like",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-thumbs-up"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-thumbs-up"
}
},
"checked": false,
"disabled": false
},
"react": {
"modifier": "link-secondary",
"element": "button",
"href": false,
"title": "Reageer",
"aria_label": "",
"text": "Reageer",
"isExternal": false,
"iconBefore": {
"icon": "fa-comment-alt-lines",
"style": "fas"
}
},
"reactions": {
"modifier": "link-secondary",
"element": "button",
"href": false,
"title": "12 reacties",
"aria_label": "",
"text": "12 reacties",
"isExternal": false,
"extIcon": false,
"action": false
}
}
]
}
.feed {
.feed-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding-bottom: 24px;
border-bottom: 1px solid #e3e3e3;
margin-bottom: 32px;
}
.feed-header-title {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-right: 32px;
margin-bottom: 8px;
width: 100%;
.icon {
@apply text-red;
margin-right: 16px;
}
@screen md {
flex-wrap: nowrap;
margin-bottom: 8px;
width: auto;
}
}
.feed-header-title-text {
margin-bottom: 0;
}
.feed-footer {
padding-top: 32px;
border-top: 1px solid #e3e3e3;
margin-top: 32px;
}
}
No notes defined.