diff --git a/src/patterns/04-components/_index.scss b/src/patterns/04-components/_index.scss index a4b1fbd8c4e7c789976fdc450aa6c61732e5a4c2..707aa0a48497b986e5a4f701f131322d7360967a 100644 --- a/src/patterns/04-components/_index.scss +++ b/src/patterns/04-components/_index.scss @@ -19,6 +19,7 @@ @forward 'facts-and-figures/facts-and-figures'; @forward 'filters/filters'; @forward 'google_maps/google_maps'; +@forward 'instagram/instagram'; @forward 'icon/icon'; @forward 'icon/icon--button/icon--button'; @forward 'image/image'; diff --git a/src/patterns/04-components/instagram/_instagram.scss b/src/patterns/04-components/instagram/_instagram.scss new file mode 100644 index 0000000000000000000000000000000000000000..8545f139c44b3a011cc3602b6724e4a5095cdcee --- /dev/null +++ b/src/patterns/04-components/instagram/_instagram.scss @@ -0,0 +1,22 @@ +@use '../../01-core' as *; + +.uw-instagram { + display: block; + width: 100%; + + &__wrapper { + margin-left: auto; + margin-right: auto; + max-width: 500px; + + iframe { + max-width: 500px; + width: 100%; + } + } + + &__view-on-source { + padding: var(--size-2) 0; + text-align: center; + } +} diff --git a/src/patterns/04-components/instagram/instagram.md b/src/patterns/04-components/instagram/instagram.md new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/src/patterns/04-components/instagram/instagram.twig b/src/patterns/04-components/instagram/instagram.twig new file mode 100644 index 0000000000000000000000000000000000000000..52dbb6d34d9ba57f92f898bc961706276d31d7cc --- /dev/null +++ b/src/patterns/04-components/instagram/instagram.twig @@ -0,0 +1,9 @@ +<div class="uw-instagram"> + <div class="uw-instagram__wrapper"> + <blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="{{ instagram.url }}" data-instgrm-version="12" style="max-width: 500px;"></blockquote> + <script async src="https://www.instagram.com/embed.js"></script> + </div> + <div class="uw-instagram__view-on-source"> + <a href="{{ instagram.url }}">View on Instagram</a> + </div> +</div> diff --git a/src/patterns/04-components/instagram/instagram.yml b/src/patterns/04-components/instagram/instagram.yml new file mode 100644 index 0000000000000000000000000000000000000000..dcfbc8eec8702fb0f0b6f52077ac875b4e30faf0 --- /dev/null +++ b/src/patterns/04-components/instagram/instagram.yml @@ -0,0 +1,2 @@ +instagram: + url: 'https://www.instagram.com/p/B-pEhkon9tX'