NCC Digital Design Guide

Quote 

<div class="symbol-text-area">
    <div class="symbol-zone">
        <p class="custom-rteElement-QuoteMarks">&nbsp;</p>
    </div>
    <div class="symbol-text">
        <p>They made me happy. Now it?s my turn to make them happy.</p>
        <p style="text-align: right;">
            <strong>Chris, aged 9</strong>
        </p>
    </div>
</div>
 
<div class="symbol-text-area"> 
	<div class="symbol-zone"> 
		<p class="custom-rteElement-QuoteMarks">&nbsp;</p> 
	</div> 
	<div class="symbol-text"> 
		<p>They made me happy. Now it?s my turn to make them happy.</p>
		<p style="text-align: right;"> 
			<strong>Chris, aged 9</strong>
		</p> 
	</div> 
</div>
 
/* No context defined for this component. */
  • Content: 
    /*quote*/

.symbol-text-area {
	float: left;
	width: 100%;
	background-color: $whitesmoke;
	padding: 10px 0 0;
	margin-bottom: 15px;
	
	.symbol-zone {
		float: left;
		width: 10%;
	}
	
	.symbol-text {
		float: left;
		width: 80%;
		margin-left: 3px;
	}
}

p.custom-rteElement-QuoteMarks {
	display: block;
	padding: 10px 0 0;
	margin-bottom: 15px;
	
	&::before {
		color: $brand-primary;
		content: "\201C";
		font-family: 'Iskoola Pota';
		font-size: 6em;
		color: $brand-primary;

		float: left;
		margin-top: 15px;
		line-height: .3em;
		margin-left: 15%;
	}
}
  • URL: /components/raw/quote/_quote.scss
  • Filesystem Path: src/patterns/patterns/quote/_quote.scss
  • Size: 563 Bytes