Internetstiftelsen Styleguide

Quote 

<blockquote class="a-quote">
    &quot;I’ve never been to a virtual conference, but Confab online was 100x better than any other conference I’ve been to before—polished and professional, yet completely human.&quot;
    <footer class="a-quote__footer">
        <figure>
            <img class="a-quote__avatar" src="/assets/images/author.png" alt="citatbild">
        </figure>
        Paloma Picasso
    </footer>
</blockquote>
 
<blockquote class="a-quote">
	{{quote}}
	<footer class="a-quote__footer">
		<figure>
			<img class="a-quote__avatar" src="/assets/images/author.png" alt="citatbild">
		</figure>
		{{quotee}}
	</footer>
</blockquote>
 
{
  "name": "Quote",
  "quote": "\"I’ve never been to a virtual conference, but Confab online was 100x better than any other conference I’ve been to before—polished and professional, yet completely human.\"",
  "quotee": "Paloma Picasso"
}
  • Content: 
    @charset "UTF-8";

@include atom(quote) {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	max-width: rem(500px);
	margin: 0;
	padding: 0;

	@include e(footer) {
		display: flex;
		align-items: center;
		padding-top: rhythm(1);
		font-family: $font-family-headings;
	}

	@include e(avatar) {
		width: rhythm(4);
		height: rhythm(4);
		margin-right: rhythm(2);
		border-radius: 50%;
		background-color: $color-snow;
	}
}
  • URL: /components/raw/quote/_quote.scss
  • Filesystem Path: src/atoms/quote/_quote.scss
  • Size: 446 Bytes

No notes defined.