Upd

packages/style/src/demo/full-demo.css

@@ -713,8 +713,8 @@ a:hover {
   min-width: 273px;
   position: absolute;
   right: 0;
-  /*top: calc(100% + 12px);*/
-  top: 56px;
+  top: calc(100% + 12px);
+  /*top: 56px;*/
   width: max-content;
   z-index: 3;
 }
@@ -2504,6 +2504,7 @@ a:hover {
 
 	.dp-po-comments.comments-list + .dp-po-comments-wrap .label--time .dp-po-dropdown-menu {
 		width: 100%;
+		top: 56px;
 	}
 
 	.dp-Template .dp-po-captcha .dp-po-Icon {

packages/style/src/demo/news-demo.css

@@ -1,3 +1,51 @@
+.dp-po-news-post .dp-po-title-wrapper {
+	display: flex;
+	align-items: flex-start;
+	margin-top: 50px;
+}
+
+
+.dp-po-news-post .dp-po-main .dp-po-Title-page {
+	margin-top: 0;
+	line-height: 1;
+}
+
+.dp-po-news-post .dp-calendar {
+	background-color: var(--white);
+	margin-left: -86px;
+	margin-right: 20px;
+}
+
+.dp-po-news-post .dp-calendar li {
+	font: var(--messenger-h-3-medium);
+	border: 0;
+	padding: 3px 10px 3px;
+}
+
+.dp-po-news-post .dp-calendar li:first-child {
+	padding: 7px 0 0;
+}
+
+.dp-po-news-post .dp-calendar .dp-po-month {
+	border-bottom: 1px solid var(--grey-light);
+	font: var(--mh-1);
+	line-height: 1;
+	padding: 0 0 6px;
+}
+
+.dp-po-news-post .dp-po-List.List--avatars {
+	margin-top: 10px;
+}
+
+.dp-po-news-post .dp-po-description-wrap {
+	margin-bottom: 25px;
+}
+
+.dp-po-news-post .dp-po-description-wrap .dp-po-description {
+	font: var(--mp-1);
+	color: var(--grey-dark);
+}
+
 .dp-po-news-post .dp-po-Image-knowledgabse {
 	border: none;
 }
@@ -7,3 +55,152 @@
 	margin: 0 auto;
 }
 
+.dp-po-news-post .dp-po-tex-wrap .dp-po-tooltip-wrap {
+	border-radius: 2px;
+}
+
+.dp-po-news-post .dp-po-recent-news .dp-po-label {
+	border-radius: 4px;
+	border: 1px solid var(--grey-light);
+	font: var(--p-3-semibold);
+	color: var(--grey-dark);
+	background-color: var(--grey-lighter);
+	margin-right: 8px;
+	white-space: nowrap;
+	padding: 3px 7px;
+}
+
+.dp-po-news-post .dp-po-recent-news .dp-po-list-item.is-active .dp-po-label {
+	color: var(--grey-darkest);
+	background-color: var(--white);
+}
+
+.dp-po-news-post .dp-po-recent-news .dp-po-list-item.is-active {
+	color: var(--grey-darkest);
+}
+
+.dp-po-news-post .dp-po-recent-news .dp-po-list-item.is-disabled .dp-po-label {
+	color: var(--grey);
+	background-color: var(--grey-lightest);
+}
+
+.dp-po-news-post .dp-po-recent-news .dp-po-list-item.is-disabled {
+	color: var(--grey-light);
+}
+
+.dp-po-news-post .dp-po-recent-news .dp-po-List {
+	margin: 8px 0 0;
+	overflow: hidden;
+}
+
+.dp-po-news-post .dp-po-recent-news .dp-po-list-item {
+	display: flex;
+	font: var(--p-2-bold);
+	align-items: center;
+	color: var(--grey);
+	padding: 4px 20px;
+}
+
+.dp-po-news-post .dp-po-recent-news .dp-po-list-item .dp-po-recent-description {
+	overflow: hidden;
+	white-space: nowrap;
+	display: inline-block;
+	text-overflow: ellipsis;
+}
+
+.dp-po-news-post .dp-po-wrap-item.dp-po-recent-news {
+	padding: 12px 0 15px 0;
+}
+
+@media screen and (min-width: 992px) and (max-width: 1280px) { 
+
+	.dp-po-news-post .dp-po-recent-news .dp-po-list-item .dp-po-recent-description {
+		max-width: 100px;
+	}
+
+}
+
+@media (max-width: 1200px) {
+
+	.dp-po-news-post .dp-calendar {
+		margin-left: 0;
+	}
+
+}
+
+@media (max-width: 992px) {
+
+	.dp-po-news-post .dp-po-title-wrapper {
+		margin-top: 22px;
+	}
+
+	.dp-po-news-post .dp-calendar {
+		margin-right: 10px;
+	}
+
+	.dp-po-news-post .dp-po-main .dp-po-Title-page {
+		line-height: 1.2;
+	}
+
+	.dp-po-news-post .dp-po-description-wrap .dp-po-description {
+		padding-left: 70px;
+		max-width: 300px;
+	}
+
+	.dp-po-news-post .dp-po-recent-news .dp-po-list-item {
+		padding: 4px 0;
+	}
+
+	.dp-po-news-post .dp-po-wrap-item.dp-po-recent-news {
+		padding: 0;
+	}
+
+	.dp-po-news-post .Voting-section + .dp-po-wrap-collapse-md {
+		margin-bottom: 50px;
+	}
+
+	.dp-po-news-post .dp-po-tex-wrap {
+	    padding: 23px 0 12px 0;
+	}
+
+	.dp-po-news-post .dp-po-recent-news .dp-po-md-collapse-content {
+		padding: 5px 0 15px;
+	}
+
+}
+
+@media (max-width: 400px) {
+
+	.dp-po-news-post .dp-po-recent-news .dp-po-list-item .dp-po-recent-description {
+		max-width: 250px;
+	}
+
+}
+
+@media screen and (min-width: 1280px) {
+
+	.dp-po-news-post .dp-po-recent-news .dp-po-list-item .dp-po-recent-description {
+		max-width: 185px;
+	}
+
+}
+
+@media (min-width: 992px) {
+	.dp-po-news-post .dp-po-tex-wrap .dp-po-tooltip-wrap {
+		background-color: var(--grey-lighter);
+		font: var(--mh-3-medium);
+	}
+
+	.dp-po-news-post .dp-po-Sidebar.Sidebar--right .subscribe--dropdown {
+		margin-bottom: 25px;
+	}
+
+	.dp-po-news-post .dp-po-recent-news .dp-po-title {
+		padding: 0 20px;
+	}
+
+	.dp-po-news-post .dp-po-recent-news .dp-po-list-item:hover {
+		background-color: var(--info-light);
+	}
+
+}

packages/style/website/pages/en/index.js

@@ -72,6 +72,7 @@ class HomeSplash extends React.Component {
           <ul>
             <li><a href={pageUrl('demos/kb-view.html')}>KB View</a></li>
             <li><a href={pageUrl('demos/kb-view-pdf.html')}>KB View PDF</a></li>
+            <li><a href={pageUrl('demos/kb-view-news.html')}>KB View News - Post</a></li>
           </ul>
         </Demos>
       </div>