3-atoms

a_opac   

Copy
Edit
<!-- components/3-atoms/a_opac.txp -->
Copy
Copy
Edit
/* scss/3-atoms/_a_opac.scss */ .a_opac { &--75 { opacity: .75; } &--50 { opacity: .5; } &--25 { opacity: .25; } }

a_ratio   

Copy
Edit
<!-- components/3-atoms/a_ratio.txp -->
Copy
Copy
Edit
/* scss/3-atoms/_a_ratio.scss */ .a_ratio { &--1x1 { aspect-ratio: 1/1; } &--2x1 { aspect-ratio: 2/1; } &--1x2 { aspect-ratio: 1/2; } @media (orientation: landscape) { &--2x1\@landscape { aspect-ratio: 2/1; } } &--3x2 { aspect-ratio: 3/2; } &--2x3 { aspect-ratio: 2/3; } &--gm { aspect-ratio: 1618/1000; } &--video { aspect-ratio: 16/9; } }

a_icon   

Copy
Edit
<!-- components/3-atoms/a_icon.txp --> <img src="../styles/img/edit-article.png" class="a_icon" /> <img src="../styles/img/edit-article.png" class="a_icon a_icon--flip" /> <img src="../styles/img/edit-article.png" class="a_icon a_icon--invert" /> <img src="../styles/img/edit-article.png" class="a_icon a_icon--rotate-right" /> <img src="../styles/img/edit-article.png" class="a_icon a_icon--rotate-left" /> <img src="../styles/img/edit-article.png" class="a_icon a_icon--rotate-down" />
Copy
Copy
Edit
/* scss/3-atoms/_a_icon.scss */ .a_icon { display: inline-block; &--flip { transform: scaleX(-1); } &--invert { filter: invert(1); } &--rotate-right { transform: rotateZ(90deg); } &--rotate-left { transform: rotateZ(-90deg); } &--rotate-down { transform: rotateZ(180deg); } [rel="prev"] & {} [rel="next"] & {} &--social { &--twitter { &:after { content: url(../styles/img/social-twitter.svg); } } &--facebook { &:after { content: url(../styles/img/social-facebook.svg); } } &--linkedin { &:after { content: url(../styles/img/social-linkedin.svg); } } &--instagram { &:after { content: url(../styles/img/social-instagram.svg); } } &--threads { &:after { content: url(../styles/img/social-threads.svg); } } span { display: none; } } } .social p:empty { display: none; // txp bug? }

a_image   

Placeholder image

Image caption, with a link.

Panning variant

Copy
Edit
<!-- components/3-atoms/a_image.txp --> <!-- image srcset not shown for simplicity --> <figure class="a_image a_image--landscape"> <img src="https://place-hold.it/640x480" alt="Placeholder image"> <figcaption class="a_image__caption"> <p>Image caption, with a <a href="#">link</a>.</p> </figcaption> </figure> <p>Panning variant</p> <figure class="a_image a_ratio--2x1@landscape a_image--pan"> <!-- ken-burns-carousel attributes animation-direction= normal reverse random animation-names= ken-burns-center ken-burns-middle-left etc --> <ken-burns-carousel images="https://www.artedomus.com/images/8734.jpg https://www.artedomus.com/images/8727.jpg"> </ken-burns-carousel> <noscript> <img src="https://www.artedomus.com/images/8734.jpg" alt /> </noscript> </figure> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.1.0/webcomponents-loader.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script> <script> hljs.initHighlightingOnLoad(); window.addEventListener('WebComponentsReady', function(e) { const kenBurnsCarousel = document.createElement('script'); kenBurnsCarousel.src = '../js/ken-burns-carousel-master/src/ken-burns-carousel-min.js'; document.head.appendChild(kenBurnsCarousel); }); </script>
Copy
Copy
Edit
/* scss/3-atoms/_a_image.scss */ .a_image { position: relative; // allow for positioning of the .u_edit-in-txp component min-height: max-content; figcaption p { margin-bottom: 0; max-width: 100%; } img { object-fit: cover; height: 100%; width: 100%; } &--contain img { object-fit: contain; height: auto; width: 100%; } &--has-caption:not(.a_image--hide-caption) img { height: auto; } // see ken-burns-carousel &--pan { overflow: hidden; } &--hide-caption { figcaption { display: none; } } &--inline { // width: 50%; padding-bottom: my-bs(3); @media screen and (min-width: $medium) { padding-bottom: inherit; width: 33%; float: right; margin-left: var(--base-unit); &.large { width: 66%; } } } } ken-burns-carousel { position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 100%; }

a_headings   

Heading Level One

Heading Level Two

Heading Level Three

Heading Level Four

Heading Level Five
Heading Level Six

h1 styled as h2

h1 styled as h3

h1 styled as h4

h1 styled as h4

Long heading truncated if a width is set

Copy
Edit
<!-- components/3-atoms/a_headings.txp --> <div class="l_grid l_grid--twin"> <div class="u_baseline-grid"> <h1 class="a_heading">Heading Level One</h1> <h2 class="a_heading">Heading Level Two</h2> <h3 class="a_heading">Heading Level Three</h3> <h4 class="a_heading">Heading Level Four</h4> <h5 class="a_heading">Heading Level Five</h5> <h6 class="a_heading">Heading Level Six</h6> </div> <div class="u_baseline-grid"> <h1 class="a_heading h2-style">h1 styled as h2</h1> <h1 class="a_heading h3-style">h1 styled as h3</h1> <h1 class="a_heading h4-style">h1 styled as h4</h1> <h1 class="a_heading h5-style">h1 styled as h4</h1> <h3 class="a_heading a_heading--ellipsis" style="max-width: 20ch">Long heading truncated if a width is set</h3> </div> </div>
Copy
Copy
Edit
/* scss/3-atoms/_a_headings.scss */ h1, h2, h3, h4, h5, h6, .a_heading { letter-spacing: -.05rem; font-weight: 400; } h6 { letter-spacing: initial; } .a_heading--ellipsis { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .h0-style { //font-size: 10vw; line-height: .75; letter-spacing: -.05em; word-break: break-word; font-size: clamp(3rem,10vw, 6rem); &.max { //font-size: 15vw; font-size: clamp(3rem,15vw, 12rem); } } .h1-style, .h1-styled>* { @include heading($h1-shevy); } .h2-style, .h2-styled>* { @include heading($h2-shevy); } .h3-style, .h3-styled>* { @include heading($h3-shevy); } .h4-style, .h4-styled>* { @include heading($h4-shevy); } .h5-style, .h5-styled>* { @include heading($h5-shevy); } .h6-style, .h6-styled>* { @extend h6; } @media screen and (min-width: $medium) { .h1-style\@medium { @include heading($h1-shevy); } .h2-style\@medium { @include heading($h2-shevy); } .h3-style\@medium { @include heading($h3-shevy); } .h4-style\@medium { @include heading($h4-shevy); } .h5-style\@medium { @include heading($h5-shevy); } .h6-style\@medium { font-size: $h6 * 1rem; } .h1-styled\@medium>* { @include heading($h1-shevy); } .h2-styled\@medium>* { @include heading($h2-shevy); } .h3-styled\@medium>* { @include heading($h3-shevy); } .h4-styled\@medium>* { @include heading($h4-shevy); } .h5-styled\@medium>* { @include heading($h5-shevy); } .h6-styled\@medium>* { font-size: $h6 * 1rem; } }

a_list-bare   

  • Item One
  • Item Two
  • Item Three
Copy
Edit
<!-- components/3-atoms/a_list-bare.txp --> <ul class="a_list-bare"> <li>Item One</li> <li>Item Two</li> <li>Item Three</li> </ul>
Copy
Copy
Edit
/* scss/3-atoms/_a_list-bare.scss */ .a_list-bare { list-style: none; margin: 0; }