Figures: Examples

WIP

Notes
HTML
View
Assets
Info

No notes defined.


        
        <main id="main-content">
    <div class="wrap">
        <div class="grid">
            <div class="col-9/13@desktop offset-2/13@desktop col-11/13@tabletwide offset-1/13@tabletwide">

                <h1>Figures</h1>

                <figure class="">
                    <img src="../../img/square.png" />
                    <figcaption>
                        <p>This is a short caption to describe the image in the figure above.</p>
                    </figcaption>
                </figure>
                <h2>Large left</h2>

                <figure class=" size-large align-left">
                    <img src="../../img/square.png" />
                    <figcaption>
                        <p>This is a short caption to describe the image in the figure above.</p>
                    </figcaption>
                </figure>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed nunc eget ante tincidunt imperdiet. Ut a sodales orci, at feugiat metus. Vivamus rutrum, lorem ac mollis pulvinar, dolor dui egestas tortor, ac accumsan diam nisi in tortor. Nulla semper odio ac orci ornare lacinia. Cras ultricies volutpat rhoncus. Sed imperdiet ex laoreet nibh semper egestas. Donec id enim ut massa suscipit pellentesque ac ac lorem. Praesent rhoncus turpis ut nisl pharetra, vel suscipit tellus cursus. Sed pretium vehicula consequat. Curabitur ac suscipit arcu. Aliquam tempor neque vitae feugiat facilisis. Aenean ut varius eros, id blandit urna. </p>

                <hr>
                <h2>Medium left</h2>

                <figure class=" size-medium align-left">
                    <img src="../../img/square.png" />
                    <figcaption>
                        <p>This is a short caption to describe the image in the figure above.</p>
                    </figcaption>
                </figure>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed nunc eget ante tincidunt imperdiet. Ut a sodales orci, at feugiat metus. Vivamus rutrum, lorem ac mollis pulvinar, dolor dui egestas tortor, ac accumsan diam nisi in tortor. Nulla semper odio ac orci ornare lacinia. Cras ultricies volutpat rhoncus. Sed imperdiet ex laoreet nibh semper egestas. Donec id enim ut massa suscipit pellentesque ac ac lorem. Praesent rhoncus turpis ut nisl pharetra, vel suscipit tellus cursus. Sed pretium vehicula consequat. Curabitur ac suscipit arcu. Aliquam tempor neque vitae feugiat facilisis. Aenean ut varius eros, id blandit urna. </p>

                <hr>
                <h2>Small left</h2>

                <figure class=" size-small align-left">
                    <img src="../../img/square.png" />
                    <figcaption>
                        <p>This is a short caption to describe the image in the figure above.</p>
                    </figcaption>
                </figure>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed nunc eget ante tincidunt imperdiet. Ut a sodales orci, at feugiat metus. Vivamus rutrum, lorem ac mollis pulvinar, dolor dui egestas tortor, ac accumsan diam nisi in tortor. Nulla semper odio ac orci ornare lacinia. Cras ultricies volutpat rhoncus. Sed imperdiet ex laoreet nibh semper egestas. Donec id enim ut massa suscipit pellentesque ac ac lorem. Praesent rhoncus turpis ut nisl pharetra, vel suscipit tellus cursus. Sed pretium vehicula consequat. Curabitur ac suscipit arcu. Aliquam tempor neque vitae feugiat facilisis. Aenean ut varius eros, id blandit urna. </p>

                <hr>
                <h2>Large right</h2>

                <figure class=" size-large align-right">
                    <img src="../../img/square.png" />
                    <figcaption>
                        <p>This is a short caption to describe the image in the figure above.</p>
                    </figcaption>
                </figure>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed nunc eget ante tincidunt imperdiet. Ut a sodales orci, at feugiat metus. Vivamus rutrum, lorem ac mollis pulvinar, dolor dui egestas tortor, ac accumsan diam nisi in tortor. Nulla semper odio ac orci ornare lacinia. Cras ultricies volutpat rhoncus. Sed imperdiet ex laoreet nibh semper egestas. Donec id enim ut massa suscipit pellentesque ac ac lorem. Praesent rhoncus turpis ut nisl pharetra, vel suscipit tellus cursus. Sed pretium vehicula consequat. Curabitur ac suscipit arcu. Aliquam tempor neque vitae feugiat facilisis. Aenean ut varius eros, id blandit urna. </p>

                <hr>
                <h2>Medium right</h2>

                <figure class=" size-medium align-right">
                    <img src="../../img/square.png" />
                    <figcaption>
                        <p>This is a short caption to describe the image in the figure above.</p>
                    </figcaption>
                </figure>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed nunc eget ante tincidunt imperdiet. Ut a sodales orci, at feugiat metus. Vivamus rutrum, lorem ac mollis pulvinar, dolor dui egestas tortor, ac accumsan diam nisi in tortor. Nulla semper odio ac orci ornare lacinia. Cras ultricies volutpat rhoncus. Sed imperdiet ex laoreet nibh semper egestas. Donec id enim ut massa suscipit pellentesque ac ac lorem. Praesent rhoncus turpis ut nisl pharetra, vel suscipit tellus cursus. Sed pretium vehicula consequat. Curabitur ac suscipit arcu. Aliquam tempor neque vitae feugiat facilisis. Aenean ut varius eros, id blandit urna. </p>

                <hr>
                <h2>Small right</h2>

                <figure class=" size-small align-right">
                    <img src="../../img/square.png" />
                    <figcaption>
                        <p>This is a short caption to describe the image in the figure above.</p>
                    </figcaption>
                </figure>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed nunc eget ante tincidunt imperdiet. Ut a sodales orci, at feugiat metus. Vivamus rutrum, lorem ac mollis pulvinar, dolor dui egestas tortor, ac accumsan diam nisi in tortor. Nulla semper odio ac orci ornare lacinia. Cras ultricies volutpat rhoncus. Sed imperdiet ex laoreet nibh semper egestas. Donec id enim ut massa suscipit pellentesque ac ac lorem. Praesent rhoncus turpis ut nisl pharetra, vel suscipit tellus cursus. Sed pretium vehicula consequat. Curabitur ac suscipit arcu. Aliquam tempor neque vitae feugiat facilisis. Aenean ut varius eros, id blandit urna. </p>

            </div>
        </div>
    </div>
</main>


        <main id="main-content">
    <div class="wrap">
        <div class="grid">
            <div class="col-9/13@desktop offset-2/13@desktop col-11/13@tabletwide offset-1/13@tabletwide">

                <h1>Figures</h1>
{% include '@figure' %}

<h2>Large left</h2>
{% include '@figure' with {
    modifiers: ['size-large align-left']
} %}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed nunc eget ante tincidunt imperdiet. Ut a sodales orci, at feugiat metus. Vivamus rutrum, lorem ac mollis pulvinar, dolor dui egestas tortor, ac accumsan diam nisi in tortor. Nulla semper odio ac orci ornare lacinia. Cras ultricies volutpat rhoncus. Sed imperdiet ex laoreet nibh semper egestas. Donec id enim ut massa suscipit pellentesque ac ac lorem. Praesent rhoncus turpis ut nisl pharetra, vel suscipit tellus cursus. Sed pretium vehicula consequat. Curabitur ac suscipit arcu. Aliquam tempor neque vitae feugiat facilisis. Aenean ut varius eros, id blandit urna. </p>

<hr>
<h2>Medium left</h2>
{% include '@figure' with {
    modifiers: ['size-medium align-left']
} %}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed nunc eget ante tincidunt imperdiet. Ut a sodales orci, at feugiat metus. Vivamus rutrum, lorem ac mollis pulvinar, dolor dui egestas tortor, ac accumsan diam nisi in tortor. Nulla semper odio ac orci ornare lacinia. Cras ultricies volutpat rhoncus. Sed imperdiet ex laoreet nibh semper egestas. Donec id enim ut massa suscipit pellentesque ac ac lorem. Praesent rhoncus turpis ut nisl pharetra, vel suscipit tellus cursus. Sed pretium vehicula consequat. Curabitur ac suscipit arcu. Aliquam tempor neque vitae feugiat facilisis. Aenean ut varius eros, id blandit urna. </p>

<hr>
<h2>Small left</h2>
{% include '@figure' with {
    modifiers: ['size-small align-left']
} %}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed nunc eget ante tincidunt imperdiet. Ut a sodales orci, at feugiat metus. Vivamus rutrum, lorem ac mollis pulvinar, dolor dui egestas tortor, ac accumsan diam nisi in tortor. Nulla semper odio ac orci ornare lacinia. Cras ultricies volutpat rhoncus. Sed imperdiet ex laoreet nibh semper egestas. Donec id enim ut massa suscipit pellentesque ac ac lorem. Praesent rhoncus turpis ut nisl pharetra, vel suscipit tellus cursus. Sed pretium vehicula consequat. Curabitur ac suscipit arcu. Aliquam tempor neque vitae feugiat facilisis. Aenean ut varius eros, id blandit urna. </p>

<hr>
<h2>Large right</h2>
{% include '@figure' with {
    modifiers: ['size-large align-right']
} %}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed nunc eget ante tincidunt imperdiet. Ut a sodales orci, at feugiat metus. Vivamus rutrum, lorem ac mollis pulvinar, dolor dui egestas tortor, ac accumsan diam nisi in tortor. Nulla semper odio ac orci ornare lacinia. Cras ultricies volutpat rhoncus. Sed imperdiet ex laoreet nibh semper egestas. Donec id enim ut massa suscipit pellentesque ac ac lorem. Praesent rhoncus turpis ut nisl pharetra, vel suscipit tellus cursus. Sed pretium vehicula consequat. Curabitur ac suscipit arcu. Aliquam tempor neque vitae feugiat facilisis. Aenean ut varius eros, id blandit urna. </p>

<hr>
<h2>Medium right</h2>
{% include '@figure' with {
    modifiers: ['size-medium align-right']
} %}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed nunc eget ante tincidunt imperdiet. Ut a sodales orci, at feugiat metus. Vivamus rutrum, lorem ac mollis pulvinar, dolor dui egestas tortor, ac accumsan diam nisi in tortor. Nulla semper odio ac orci ornare lacinia. Cras ultricies volutpat rhoncus. Sed imperdiet ex laoreet nibh semper egestas. Donec id enim ut massa suscipit pellentesque ac ac lorem. Praesent rhoncus turpis ut nisl pharetra, vel suscipit tellus cursus. Sed pretium vehicula consequat. Curabitur ac suscipit arcu. Aliquam tempor neque vitae feugiat facilisis. Aenean ut varius eros, id blandit urna. </p>

<hr>
<h2>Small right</h2>
{% include '@figure' with {
    modifiers: ['size-small align-right']
} %}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed nunc eget ante tincidunt imperdiet. Ut a sodales orci, at feugiat metus. Vivamus rutrum, lorem ac mollis pulvinar, dolor dui egestas tortor, ac accumsan diam nisi in tortor. Nulla semper odio ac orci ornare lacinia. Cras ultricies volutpat rhoncus. Sed imperdiet ex laoreet nibh semper egestas. Donec id enim ut massa suscipit pellentesque ac ac lorem. Praesent rhoncus turpis ut nisl pharetra, vel suscipit tellus cursus. Sed pretium vehicula consequat. Curabitur ac suscipit arcu. Aliquam tempor neque vitae feugiat facilisis. Aenean ut varius eros, id blandit urna. </p>

            </div>
        </div>
    </div>
</main>

File:

Content:


                                :where(aside) {
	@include typescale('sm');
	position: relative;
	color: $aside-color;

	&:after {
		content:'';
		width: 1px;
		position: absolute;
		top: 0;
		bottom: 0;
		left: -$spacing-xs;
		box-shadow: -1px 0 0 0 #C0C0C0;
	}

	#{headings()} {
		color: $navy;
		margin: 0;
	}

	> *:last-child {
		margin-bottom: 0;
	}
}

figure {
	video {
		max-width: 100%;
	}
}

URL: /components/raw/figure/_figures.scss
Filesystem Path: app/components/02-components/figures/_figures.scss
Size: 366 Bytes

Handle: @figure--examples
Variants (8): Default , Large left , Medium left , Small left , Large right , Medium right , Small right , Examples
Preview:
- With layout
- Component only
Filesystem Path: app/components/02-components/figures/figures--examples.twig
References (1): @figure