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";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;


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

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

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

No notes defined.