Classic

P202-02 / V202-02

Classic is in principe een kopie van de standaard blog template die ook in NCCMS1 de default was. 

Hoe te gebruiken?

Voorvertoning

Alvast beginnen met een basis opmaak?

CSS
Kopiëren.blog-collection-items .blog-item-preview, .blog-related-feed .blog-item-preview {
	box-shadow: 0 0 8px -4px rgba(0,0,0,0.5);
 	padding: 1rem;
	margin-bottom:2rem;
}

.blog-collection-items .image, .blog-related-feed .image{
	margin:0 -1rem;
}

.blog-collection-items .fields, .blog-related-feed .fields{
	padding-top:0.5rem;
}

.blog-collection-items .fields ul li, .blog-related-feed .fields ul li, .blog-content .fields ul li{
	color:#000;
	display: inline;
	margin:1rem 1rem 0 0;
}

.blog-collection-items .intro, .blog-related-feed .intro{
	color:#000;
}

.blog-collection-items .readmore, .blog-related-feed .readmore{
	display: table;
	background-color: var(--primary);
	color: var(--white);
	padding: calc(var(--button-padding) / 2) var(--button-padding);
	margin-top: 1rem;
}

.blog-collection-items .h3, .blog-related-feed .h3{
	color: #000;
}

.blog-content .btn-link{
	display: table;
	background-color: var(--tertiary);
	color: var(--white);
	padding: calc(var(--button-padding) / 2) var(--button-padding);
	margin-bottom:1rem;
}

.blog-related{
	padding:5rem 0;
}

.blog-related .h2{
	margin-bottom:1rem;
}

.fields ul li:nth-child(1):before {
	/* Zorg dat icons overal hetzelfde zullen renderen. */
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;

	/* Zet Font Awesome als lettertype. */
	font: var(--fa-font-solid);
	/*
	  Andere opties zijn:
	  font: var(--fa-font-brands);
	  font: var(--fa-font-duotone);
	  font: var(--fa-font-light);
	  font: var(--fa-font-regular);
	  font: var(--fa-font-thin);
	*/

	/* Zet icoon code als content. Zie de Font Awesome Gallery voor alle icoon codes. */
	content: "\f276";
	margin-right:1rem;
	font-size:1.5rem;
  }

 .fields ul li:nth-child(2):before {
	/* Zorg dat icons overal hetzelfde zullen renderen. */
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;

	/* Zet Font Awesome als lettertype. */
	font: var(--fa-font-regular);
	/*
	  Andere opties zijn:
	  font: var(--fa-font-brands);
	  font: var(--fa-font-duotone);
	  font: var(--fa-font-light);
	  font: var(--fa-font-solid);
	  font: var(--fa-font-thin);
	*/

	/* Zet icoon code als content. Zie de Font Awesome Gallery voor alle icoon codes. */
	content: "\e001";
	margin-right:1rem;
	font-size:1.5rem;
  }