1.1 #Atoms.buttons Buttons

Source: docroot/themes/contrib/district_base/styles/scss/objects/_button.scss, line 1

1.1.1 #Atoms.buttons.button-sizes Button sizes

Defines button sizes.

Examples

Default styling

Link button

.button--x-small

X Small button size

Link button

.button--small

Small button size

Link button

.button--large

Large button size

Link button

Markup

 <p>
  <a href="#" class="button [modifier class]">Link button</a>
  <button class="button [modifier class]">Button tag</button>
  <input type="submit" class="button [modifier class]" value="Submit button" />
 </p>

Source: docroot/themes/contrib/district_base/styles/scss/objects/_button.scss, line 41

1.1.2 #Atoms.buttons.buttons Button variations

Defines button colors. If only button class is used it will use button--primary.

Examples

Default styling

Link button

.button--primary

Primary button style

Link button

.button--secondary

Secondary button style

Link button

.button--tertiary

Tertiary button style

Link button

.button--light

Light button style

Link button

.button--transparent

Transparent style button.

Link button

Markup

 <p>
  <a href="#" class="button [modifier class]">Link button</a>
  <button class="button [modifier class]">Button tag</button>
  <input type="submit" class="button [modifier class]" value="Submit button" />
 </p>

Source: docroot/themes/contrib/district_base/styles/scss/objects/_button.scss, line 5

1.1.3 #Atoms.buttons.icon-button Button icon small

Defines button icon small

Example

Link button

Markup

 <p>
  <a href="#" class="button-icon-small">Link button</a>
 </p>

Source: docroot/themes/contrib/district_base/styles/scss/objects/_button.scss, line 81

1.2 #Atoms.cards Card

Source: docroot/themes/contrib/district_base/styles/scss/components/_card.scss, line 1

1.2.1 #Atoms.cards.card-component Card Component

Example of a singular card component.

Example

Card body

Markup

<div class="card">
  <div class="js-img-to-bg" style="background-image: url(https://picsum.photos/1800/800);">
    <img src="https://picsum.photos/1800/800" style="visibility: hidden;">
  </div>
  <div>
    Card body
  </div>
</div>

Source: docroot/themes/contrib/district_base/styles/scss/components/_card.scss, line 5

1.3 #Atoms.date Date

Source: docroot/themes/contrib/district_base/styles/scss/components/_date.scss, line 1

1.3.1 #Atoms.date.date-icon Date icon

Display the date with a calendar icon.

Example

Posted 23 Feb

Markup

<p class="date-icon">
  <span class="date-icon__label">Posted</span>
  <span class="date-icon__date">23 Feb</span>
</p>

Source: docroot/themes/contrib/district_base/styles/scss/components/_date.scss, line 6

1.4 #Atoms.downloads Downloads

Source: docroot/themes/contrib/district_base/styles/scss/components/_downloads.scss, line 1

1.4.1 #Atoms.downloads.downloads Downloads

file download component

Example

Cras irure aenean malesuada rem ullamco tempore sodales voluptate, porttitor assumenda eleifend varius sed numquam, tempora aspernatur a at corrupti euismod architecto pretium iste recusandae

Markup

 <div class="paragraph__downloads">
   <div class="downloads__prefix">
     <p>Cras irure aenean malesuada rem ullamco tempore sodales voluptate, porttitor assumenda eleifend varius sed numquam, tempora aspernatur a at corrupti euismod architecto pretium iste recusandae</p>
   </div>
   <ul class="downloads__list">
     <li class="downloads__list-item">
       <div class="field__item">
         <span class="file file--mime-text-plain file--text"> <a href="#" type="text/plain; length=30">Council application form.txt</a></span>
       </div>
     </li>
     <li class="downloads__list-item">
       <div class="field__item">
         <span class="file file--mime-text-plain file--text"> <a href="#" type="text/plain; length=30">Information brochure and specifications.txt</a></span>
       </div>
     </li>
   </ul>
 </div>

Source: docroot/themes/contrib/district_base/styles/scss/components/_downloads.scss, line 5

1.5 #Atoms.icons Icons

Source: docroot/themes/contrib/district_base/styles/scss/objects/_icon.scss, line 1

1.5.1 #Atoms.icons.icons Icons

Icons are built using icomoon, any updates should be reflected here.

Use ico2sass to convert icomoon icons to sass maps or html.

Example

Markup

 <div class="duk-icon-set duk-overflow--hidden">
   <span title="arrow-default-right"><i class="duk-icon-arrow-default-right"></i></span>
   <span title="arrow-thin-right"><i class="duk-icon-arrow-thin-right"></i></span>
   <span title="instagram"><i class="duk-icon-instagram"></i></span>
   <span title="envelope"><i class="duk-icon-envelope"></i></span>
   <span title="asterisk"><i class="duk-icon-asterisk"></i></span>
   <span title="plus"><i class="duk-icon-plus"></i></span>
   <span title="question"><i class="duk-icon-question"></i></span>
   <span title="minus"><i class="duk-icon-minus"></i></span>
   <span title="music"><i class="duk-icon-music"></i></span>
   <span title="search"><i class="duk-icon-search"></i></span>
   <span title="heart"><i class="duk-icon-heart"></i></span>
   <span title="star"><i class="duk-icon-star"></i></span>
   <span title="star-o"><i class="duk-icon-star-o"></i></span>
   <span title="user"><i class="duk-icon-user"></i></span>
   <span title="film"><i class="duk-icon-film"></i></span>
   <span title="th-large"><i class="duk-icon-th-large"></i></span>
   <span title="th"><i class="duk-icon-th"></i></span>
   <span title="th-list"><i class="duk-icon-th-list"></i></span>
   <span title="check"><i class="duk-icon-check"></i></span>
   <span title="close"><i class="duk-icon-close"></i></span>
   <span title="remove"><i class="duk-icon-remove"></i></span>
   <span title="times"><i class="duk-icon-times"></i></span>
   <span title="search-plus"><i class="duk-icon-search-plus"></i></span>
   <span title="search-minus"><i class="duk-icon-search-minus"></i></span>
   <span title="power-off"><i class="duk-icon-power-off"></i></span>
   <span title="signal"><i class="duk-icon-signal"></i></span>
   <span title="cog"><i class="duk-icon-cog"></i></span>
   <span title="gear"><i class="duk-icon-gear"></i></span>
   <span title="trash-o"><i class="duk-icon-trash-o"></i></span>
   <span title="home"><i class="duk-icon-home"></i></span>
   <span title="file-o"><i class="duk-icon-file-o"></i></span>
   <span title="clock-o"><i class="duk-icon-clock-o"></i></span>
   <span title="download"><i class="duk-icon-download"></i></span>
   <span title="arrow-circle-o-down"><i class="duk-icon-arrow-circle-o-down"></i></span>
   <span title="arrow-circle-o-up"><i class="duk-icon-arrow-circle-o-up"></i></span>
   <span title="play-circle-o"><i class="duk-icon-play-circle-o"></i></span>
   <span title="repeat"><i class="duk-icon-repeat"></i></span>
   <span title="rotate-right"><i class="duk-icon-rotate-right"></i></span>
   <span title="refresh"><i class="duk-icon-refresh"></i></span>
   <span title="lock"><i class="duk-icon-lock"></i></span>
   <span title="flag"><i class="duk-icon-flag"></i></span>
   <span title="headphones"><i class="duk-icon-headphones"></i></span>
   <span title="volume-off"><i class="duk-icon-volume-off"></i></span>
   <span title="volume-down"><i class="duk-icon-volume-down"></i></span>
   <span title="volume-up"><i class="duk-icon-volume-up"></i></span>
   <span title="tag"><i class="duk-icon-tag"></i></span>
   <span title="tags"><i class="duk-icon-tags"></i></span>
   <span title="book"><i class="duk-icon-book"></i></span>
   <span title="bookmark"><i class="duk-icon-bookmark"></i></span>
   <span title="camera"><i class="duk-icon-camera"></i></span>
   <span title="font"><i class="duk-icon-font"></i></span>
   <span title="bold"><i class="duk-icon-bold"></i></span>
   <span title="italic"><i class="duk-icon-italic"></i></span>
   <span title="text-height"><i class="duk-icon-text-height"></i></span>
   <span title="text-width"><i class="duk-icon-text-width"></i></span>
   <span title="align-left"><i class="duk-icon-align-left"></i></span>
   <span title="align-center"><i class="duk-icon-align-center"></i></span>
   <span title="align-right"><i class="duk-icon-align-right"></i></span>
   <span title="align-justify"><i class="duk-icon-align-justify"></i></span>
   <span title="list"><i class="duk-icon-list"></i></span>
   <span title="dedent"><i class="duk-icon-dedent"></i></span>
   <span title="outdent"><i class="duk-icon-outdent"></i></span>
   <span title="indent"><i class="duk-icon-indent"></i></span>
   <span title="video-camera"><i class="duk-icon-video-camera"></i></span>
   <span title="image"><i class="duk-icon-image"></i></span>
   <span title="photo"><i class="duk-icon-photo"></i></span>
   <span title="picture-o"><i class="duk-icon-picture-o"></i></span>
   <span title="pencil"><i class="duk-icon-pencil"></i></span>
   <span title="map-marker"><i class="duk-icon-map-marker"></i></span>
   <span title="adjust"><i class="duk-icon-adjust"></i></span>
   <span title="tint"><i class="duk-icon-tint"></i></span>
   <span title="pause"><i class="duk-icon-pause"></i></span>
   <span title="stop"><i class="duk-icon-stop"></i></span>
   <span title="forward"><i class="duk-icon-forward"></i></span>
   <span title="fast-forward"><i class="duk-icon-fast-forward"></i></span>
   <span title="step-forward"><i class="duk-icon-step-forward"></i></span>
   <span title="eject"><i class="duk-icon-eject"></i></span>
   <span title="chevron-left"><i class="duk-icon-chevron-left"></i></span>
   <span title="chevron-right"><i class="duk-icon-chevron-right"></i></span>
   <span title="plus-circle"><i class="duk-icon-plus-circle"></i></span>
   <span title="minus-circle"><i class="duk-icon-minus-circle"></i></span>
   <span title="times-circle"><i class="duk-icon-times-circle"></i></span>
   <span title="check-circle"><i class="duk-icon-check-circle"></i></span>
   <span title="question-circle"><i class="duk-icon-question-circle"></i></span>
   <span title="info-circle"><i class="duk-icon-info-circle"></i></span>
   <span title="arrow-right"><i class="duk-icon-arrow-right"></i></span>
   <span title="arrow-up"><i class="duk-icon-arrow-up"></i></span>
   <span title="arrow-down"><i class="duk-icon-arrow-down"></i></span>
   <span title="mail-forward"><i class="duk-icon-mail-forward"></i></span>
   <span title="share"><i class="duk-icon-share"></i></span>
   <span title="expand"><i class="duk-icon-expand"></i></span>
   <span title="compress"><i class="duk-icon-compress"></i></span>
   <span title="exclamation-circle"><i class="duk-icon-exclamation-circle"></i></span>
   <span title="eye"><i class="duk-icon-eye"></i></span>
   <span title="eye-slash"><i class="duk-icon-eye-slash"></i></span>
   <span title="exclamation-triangle"><i class="duk-icon-exclamation-triangle"></i></span>
   <span title="warning"><i class="duk-icon-warning"></i></span>
   <span title="calendar"><i class="duk-icon-calendar"></i></span>
   <span title="random"><i class="duk-icon-random"></i></span>
   <span title="comment"><i class="duk-icon-comment"></i></span>
   <span title="chevron-up"><i class="duk-icon-chevron-up"></i></span>
   <span title="chevron-down"><i class="duk-icon-chevron-down"></i></span>
   <span title="retweet"><i class="duk-icon-retweet"></i></span>
   <span title="shopping-cart"><i class="duk-icon-shopping-cart"></i></span>
   <span title="folder"><i class="duk-icon-folder"></i></span>
   <span title="folder-open"><i class="duk-icon-folder-open"></i></span>
   <span title="twitter-square"><i class="duk-icon-twitter-square"></i></span>
   <span title="facebook-square"><i class="duk-icon-facebook-square"></i></span>
   <span title="camera-retro"><i class="duk-icon-camera-retro"></i></span>
   <span title="thumbs-o-up"><i class="duk-icon-thumbs-o-up"></i></span>
   <span title="thumbs-o-down"><i class="duk-icon-thumbs-o-down"></i></span>
   <span title="sign-out"><i class="duk-icon-sign-out"></i></span>
   <span title="linkedin-square"><i class="duk-icon-linkedin-square"></i></span>
   <span title="twitter"><i class="duk-icon-twitter"></i></span>
   <span title="facebook"><i class="duk-icon-facebook"></i></span>
   <span title="facebook-f"><i class="duk-icon-facebook-f"></i></span>
   <span title="github"><i class="duk-icon-github"></i></span>
   <span title="unlock"><i class="duk-icon-unlock"></i></span>
   <span title="credit-card"><i class="duk-icon-credit-card"></i></span>
   <span title="feed"><i class="duk-icon-feed"></i></span>
   <span title="rss"><i class="duk-icon-rss"></i></span>
   <span title="hdd-o"><i class="duk-icon-hdd-o"></i></span>
   <span title="bullhorn"><i class="duk-icon-bullhorn"></i></span>
   <span title="bell-o"><i class="duk-icon-bell-o"></i></span>
   <span title="arrow-circle-left"><i class="duk-icon-arrow-circle-left"></i></span>
   <span title="arrow-circle-right"><i class="duk-icon-arrow-circle-right"></i></span>
   <span title="arrow-circle-up"><i class="duk-icon-arrow-circle-up"></i></span>
   <span title="arrow-circle-down"><i class="duk-icon-arrow-circle-down"></i></span>
   <span title="bars"><i class="duk-icon-bars"></i></span>
   <span title="navicon"><i class="duk-icon-navicon"></i></span>
   <span title="reorder"><i class="duk-icon-reorder"></i></span>
   <span title="list-ul"><i class="duk-icon-list-ul"></i></span>
   <span title="list-ol"><i class="duk-icon-list-ol"></i></span>
   <span title="pinterest"><i class="duk-icon-pinterest"></i></span>
   <span title="pinterest-square"><i class="duk-icon-pinterest-square"></i></span>
   <span title="google-plus-square"><i class="duk-icon-google-plus-square"></i></span>
   <span title="google-plus"><i class="duk-icon-google-plus"></i></span>
   <span title="caret-down"><i class="duk-icon-caret-down"></i></span>
   <span title="caret-up"><i class="duk-icon-caret-up"></i></span>
   <span title="caret-left"><i class="duk-icon-caret-left"></i></span>
   <span title="caret-right"><i class="duk-icon-caret-right"></i></span>
   <span title="sort-desc"><i class="duk-icon-sort-desc"></i></span>
   <span title="sort-down"><i class="duk-icon-sort-down"></i></span>
   <span title="sort-asc"><i class="duk-icon-sort-asc"></i></span>
   <span title="sort-up"><i class="duk-icon-sort-up"></i></span>
   <span title="cloud-download"><i class="duk-icon-cloud-download"></i></span>
   <span title="plus-square"><i class="duk-icon-plus-square"></i></span>
   <span title="angle-double-left"><i class="duk-icon-angle-double-left"></i></span>
   <span title="angle-double-right"><i class="duk-icon-angle-double-right"></i></span>
   <span title="angle-double-up"><i class="duk-icon-angle-double-up"></i></span>
   <span title="angle-double-down"><i class="duk-icon-angle-double-down"></i></span>
   <span title="angle-left"><i class="duk-icon-angle-left"></i></span>
   <span title="angle-right"><i class="duk-icon-angle-right"></i></span>
   <span title="angle-up"><i class="duk-icon-angle-up"></i></span>
   <span title="angle-down"><i class="duk-icon-angle-down"></i></span>
   <span title="quote-left"><i class="duk-icon-quote-left"></i></span>
   <span title="quote-right"><i class="duk-icon-quote-right"></i></span>
   <span title="spinner"><i class="duk-icon-spinner"></i></span>
   <span title="circle"><i class="duk-icon-circle"></i></span>
   <span title="folder-open-o"><i class="duk-icon-folder-open-o"></i></span>
   <span title="smile-o"><i class="duk-icon-smile-o"></i></span>
   <span title="frown-o"><i class="duk-icon-frown-o"></i></span>
   <span title="meh-o"><i class="duk-icon-meh-o"></i></span>
   <span title="gamepad"><i class="duk-icon-gamepad"></i></span>
   <span title="code-fork"><i class="duk-icon-code-fork"></i></span>
   <span title="exclamation"><i class="duk-icon-exclamation"></i></span>
   <span title="microphone"><i class="duk-icon-microphone"></i></span>
   <span title="microphone-slash"><i class="duk-icon-microphone-slash"></i></span>
   <span title="chevron-circle-left"><i class="duk-icon-chevron-circle-left"></i></span>
   <span title="chevron-circle-right"><i class="duk-icon-chevron-circle-right"></i></span>
   <span title="chevron-circle-up"><i class="duk-icon-chevron-circle-up"></i></span>
   <span title="chevron-circle-down"><i class="duk-icon-chevron-circle-down"></i></span>
   <span title="unlock-alt"><i class="duk-icon-unlock-alt"></i></span>
   <span title="ellipsis-h"><i class="duk-icon-ellipsis-h"></i></span>
   <span title="ellipsis-v"><i class="duk-icon-ellipsis-v"></i></span>
   <span title="rss-square"><i class="duk-icon-rss-square"></i></span>
   <span title="play-circle"><i class="duk-icon-play-circle"></i></span>
   <span title="minus-square"><i class="duk-icon-minus-square"></i></span>
   <span title="minus-square-o"><i class="duk-icon-minus-square-o"></i></span>
   <span title="check-square"><i class="duk-icon-check-square"></i></span>
   <span title="pencil-square"><i class="duk-icon-pencil-square"></i></span>
   <span title="external-link-square"><i class="duk-icon-external-link-square"></i></span>
   <span title="share-square"><i class="duk-icon-share-square"></i></span>
   <span title="thumbs-up"><i class="duk-icon-thumbs-up"></i></span>
   <span title="thumbs-down"><i class="duk-icon-thumbs-down"></i></span>
   <span title="youtube"><i class="duk-icon-youtube"></i></span>
   <span title="dropbox"><i class="duk-icon-dropbox"></i></span>
   <span title="bitbucket"><i class="duk-icon-bitbucket"></i></span>
   <span title="tumblr-square"><i class="duk-icon-tumblr-square"></i></span>
   <span title="apple"><i class="duk-icon-apple"></i></span>
   <span title="windows"><i class="duk-icon-windows"></i></span>
   <span title="android"><i class="duk-icon-android"></i></span>
   <span title="linux"><i class="duk-icon-linux"></i></span>
   <span title="female"><i class="duk-icon-female"></i></span>
   <span title="male"><i class="duk-icon-male"></i></span>
   <span title="arrow-circle-o-right"><i class="duk-icon-arrow-circle-o-right"></i></span>
   <span title="arrow-circle-o-left"><i class="duk-icon-arrow-circle-o-left"></i></span>
   <span title="plus-square-o"><i class="duk-icon-plus-square-o"></i></span>
   <span title="slack"><i class="duk-icon-slack"></i></span>
   <span title="google"><i class="duk-icon-google"></i></span>
   <span title="drupal"><i class="duk-icon-drupal"></i></span>
   <span title="child"><i class="duk-icon-child"></i></span>
   <span title="automobile"><i class="duk-icon-automobile"></i></span>
   <span title="car"><i class="duk-icon-car"></i></span>
   <span title="file-pdf-o"><i class="duk-icon-file-pdf-o"></i></span>
   <span title="file-word-o"><i class="duk-icon-file-word-o"></i></span>
   <span title="file-excel-o"><i class="duk-icon-file-excel-o"></i></span>
   <span title="file-powerpoint-o"><i class="duk-icon-file-powerpoint-o"></i></span>
   <span title="file-image-o"><i class="duk-icon-file-image-o"></i></span>
   <span title="file-photo-o"><i class="duk-icon-file-photo-o"></i></span>
   <span title="file-picture-o"><i class="duk-icon-file-picture-o"></i></span>
   <span title="file-archive-o"><i class="duk-icon-file-archive-o"></i></span>
   <span title="file-zip-o"><i class="duk-icon-file-zip-o"></i></span>
   <span title="file-audio-o"><i class="duk-icon-file-audio-o"></i></span>
   <span title="file-sound-o"><i class="duk-icon-file-sound-o"></i></span>
   <span title="file-movie-o"><i class="duk-icon-file-movie-o"></i></span>
   <span title="file-video-o"><i class="duk-icon-file-video-o"></i></span>
   <span title="file-code-o"><i class="duk-icon-file-code-o"></i></span>
   <span title="qq"><i class="duk-icon-qq"></i></span>
   <span title="wechat"><i class="duk-icon-wechat"></i></span>
   <span title="weixin"><i class="duk-icon-weixin"></i></span>
   <span title="paper-plane"><i class="duk-icon-paper-plane"></i></span>
   <span title="send"><i class="duk-icon-send"></i></span>
   <span title="circle-thin"><i class="duk-icon-circle-thin"></i></span>
   <span title="cc-visa"><i class="duk-icon-cc-visa"></i></span>
   <span title="cc-mastercard"><i class="duk-icon-cc-mastercard"></i></span>
   <span title="cc-amex"><i class="duk-icon-cc-amex"></i></span>
   <span title="cc-paypal"><i class="duk-icon-cc-paypal"></i></span>
   <span title="copyright"><i class="duk-icon-copyright"></i></span>
   <span title="area-chart"><i class="duk-icon-area-chart"></i></span>
   <span title="pie-chart"><i class="duk-icon-pie-chart"></i></span>
   <span title="line-chart"><i class="duk-icon-line-chart"></i></span>
   <span title="toggle-off"><i class="duk-icon-toggle-off"></i></span>
   <span title="toggle-on"><i class="duk-icon-toggle-on"></i></span>
   <span title="user-plus"><i class="duk-icon-user-plus"></i></span>
   <span title="user-times"><i class="duk-icon-user-times"></i></span>
   <span title="bed"><i class="duk-icon-bed"></i></span>
   <span title="hotel"><i class="duk-icon-hotel"></i></span>
   <span title="battery"><i class="duk-icon-battery"></i></span>
   <span title="battery-4"><i class="duk-icon-battery-4"></i></span>
   <span title="battery-full"><i class="duk-icon-battery-full"></i></span>
   <span title="clone"><i class="duk-icon-clone"></i></span>
   <span title="industry"><i class="duk-icon-industry"></i></span>
   <span title="map-o"><i class="duk-icon-map-o"></i></span>
   <span title="map"><i class="duk-icon-map"></i></span>
   <span title="commenting"><i class="duk-icon-commenting"></i></span>
   <span title="pause-circle-o"><i class="duk-icon-pause-circle-o"></i></span>
   <span title="stop-circle-o"><i class="duk-icon-stop-circle-o"></i></span>
   <span title="question-circle-o"><i class="duk-icon-question-circle-o"></i></span>
   <span title="times-rectangle"><i class="duk-icon-times-rectangle"></i></span>
   <span title="window-close"><i class="duk-icon-window-close"></i></span>
 </div>

Source: docroot/themes/contrib/district_base/styles/scss/objects/_icon.scss, line 5

1.6 #Atoms.link Link

Source: docroot/themes/contrib/district_base/styles/scss/layouts/_link--cta.scss, line 1

1.6.1 #Atoms.link.link-cta Link CTA

Defines a link CTA

Example

Link title

Aenean ex felis, convallis ac nunc eu, cursus luctus augue etiam dictum nulla

External link

Markup

 <div class="link--cta" style="max-width: 400px">
   <div class="link__title"><strong>Link title</strong><span><i></i></span> </div>
   <div class="link__descrtiption">Aenean ex felis, convallis ac nunc eu, cursus luctus augue etiam dictum nulla</div>
   <div class="link__link"><a href="https://google.com">External link</a></div>
 </div>

Source: docroot/themes/contrib/district_base/styles/scss/layouts/_link--cta.scss, line 5

1.7 #Atoms.list List

Source: docroot/themes/contrib/district_base/styles/scss/objects/_list.scss, line 1

1.7.1 #Atoms.list.inline-list Inline list

Places list items inline.

@extend %list-inline;

Example

Item one
Item two
Item three

Markup

<ul class="list-inline">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

Source: docroot/themes/contrib/district_base/styles/scss/objects/_list.scss, line 33

1.7.2 #Atoms.list.unordered-list Unordered list

Unordered list of items

Example

Item one
Item two
Item three

Markup

<ul>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

Source: docroot/themes/contrib/district_base/styles/scss/objects/_list.scss, line 7

1.8 #Atoms.loaders Loaders

Source: docroot/themes/contrib/district_base/styles/scss/objects/_loader.scss, line 1

1.8.1 #Atoms.loaders.throbber Ajax progress throbber

Default ajax progress throbber.

Example

Markup

<div class="ajax-progress-throbber">
 <span class="throbber"></span>
</div>

Source: docroot/themes/contrib/district_base/styles/scss/objects/_loader.scss, line 5

1.9 #Atoms.settings Settings

See scss/_settings.scss for all values.

Source: docroot/themes/contrib/district_base/styles/scss/settings/_duk-settings.scss, line 1

1.9.1 #Atoms.settings.buttons Buttons

$duk-base-button-settings: (
 'font-weight':    bold,
 'icon-size':      0.5rem,
);

$duk-base-button-sizes: (
 'small': 75%,
 'large': 130%,
);

Source: docroot/themes/contrib/district_base/styles/scss/settings/_duk-settings.scss, line 262

1.9.2 #Atoms.settings.colors Colors

Various color maps

$duk-colors: (
 'valhalla':         #261C54, // Dark purple.
 'purple-heart':     #5C21D8, // Mid purple.
 'waterloo':         #7d7798, // Light purple.
 'purple-tint':      #F4F3F3, // Very light purple.
 'mango':            #FFBE0B, // Yellow.
 'mine-shaft':       #333333, // Dark grey.
 'op-dark-tint-1':   rgba(#111, 0.2),
 'op-dark-tint-2':   rgba(#111, 0.1),
 'op-dark-tint-3':   rgba(#111, 0.05),
);

$duk-palette: (
 'primary':           map-get($duk-colors, 'valhalla'),
 'primary-light':     map-get($duk-colors, 'purple-heart'),
 'secondary':         map-get($duk-colors, 'mango'),
 'tertiary':          map-get($duk-colors, 'purple-tint'),
 'body-text':         map-get($duk-colors, 'mine-shaft'),
 'tint':              map-get($duk-colors, 'purple-tint'),
 'description':       map-get($duk-grays, '700'),
 'white':             map-get($duk-grays, 'white'),
 'black':             map-get($duk-grays, 'black'),
 'op-dark-tint-1':    map-get($duk-colors, 'op-dark-tint-1'),
 'op-dark-tint-2':    map-get($duk-colors, 'op-dark-tint-2'),
 'op-dark-tint-3':    map-get($duk-colors, 'op-dark-tint-3'),
);

$duk-font-colors: map-merge($duk-palette, (
 'body':                   map-get($duk-palette, 'body-text'),
 'heading':                map-get($duk-palette, 'primary'),
 'highlght-heading':       map-get($duk-palette, 'primary'),
 'highlight':              map-get($duk-palette, 'primary-light'),
 'link':                   map-get($duk-palette, 'primary'),
 'light-on-primary':       map-get($duk-palette, 'tint'),
 'lightest-on-primary':    map-get($duk-palette, 'white'),
 'nav':                    map-get($duk-palette, 'body-text'),
 'nav-hover':              map-get($duk-palette, 'primary-light'),
 'breadcrumb':             map-get($duk-palette, 'secondary'),
 'breadcrumb-last':        map-get($duk-palette, 'white'),
));

$duk-bg-colors:  map-merge($duk-palette, (
 'body':               map-get($duk-palette, 'white'),
 'tint':               map-get($duk-palette, 'tint'),
 'highlight':          map-get($duk-palette, 'primary'),
 'op-dark-tint-1':     map-get($duk-palette, 'op-dark-tint-1'),
 'op-dark-tint-2':     map-get($duk-palette, 'op-dark-tint-2'),
));

$duk-button-colors: (
 'primary':          map-get($duk-palette, 'primary'),
 'primary-text':     map-get($duk-palette, 'white'),
 'primary-icon':     map-get($duk-palette, 'secondary'),
 'secondary':        map-get($duk-palette, 'secondary'),
 'secondary-text':   map-get($duk-palette, 'primary'),
 'secondary-icon':   map-get($duk-palette, 'primary'),
 'tertiary':         map-get($duk-palette, 'tertiary'),
 'tertiary-text':    map-get($duk-palette, 'primary'),
 'tertiary-icon':    map-get($duk-palette, 'secondary'),
 'light':            map-get($duk-palette, 'white'),
 'light-text':       map-get($duk-palette, 'primary'),
 'light-icon':       map-get($duk-palette, 'secondary'),
 'transparent':      rgba(map-get($duk-palette, 'white'), 0.1),
 'transparent-text': map-get($duk-palette, 'white'),
 'transparent-icon': rgba(map-get($duk-palette, 'white'), 0.9),
);

$duk-border-colors: map-merge($duk-palette, ());

Source: docroot/themes/contrib/district_base/styles/scss/settings/_duk-settings.scss, line 116

1.9.3 #Atoms.settings.hero Hero Banners

Source: docroot/themes/contrib/district_base/styles/scss/settings/_hero.scss, line 1

1.9.4 #Atoms.settings.hero-basic Basic banner

Settings used for the smaller basic banner

$hero-basic--height--small: 150px;
$hero-basic--height--large: 300px;

Source: docroot/themes/contrib/district_base/styles/scss/settings/_hero.scss, line 25

1.9.5 #Atoms.settings.hero-large Large banner

Settings used for the banner primarily used on the homepage.

$hero-banner-content-width--large: calc((100vw * 0.4) - (100vw - #{map-get($duk-base-containers, 'large')})/2);
$hero-banner-home--height--small: 500px;
$hero-banner-home--height--medium: 400px;
$hero-banner-home--height--large: 500px;

Source: docroot/themes/contrib/district_base/styles/scss/settings/_hero.scss, line 5

1.9.6 #Atoms.settings.icon-mappings Duk icon mappings

Settings used for icon functions.

$duk-icon-mappings: (
 font-family: 'Doghouse UIKit',
 path: $duk-icon-font-path,
 filename: 'icomoon',
 codes: (
   arrow-default-right: "\e900",
   arrow-default-right: "\e900",
   arrow-thin-right: "\e901",
   instagram: "\e903",
   facebook: "\f09a",
   facebook-f: "\f09a",
   twitter: "\f099",
   envelope: "\e902",
   asterisk: "\f069",
   plus: "\f067",
   question: "\f128",
   minus: "\f068",
   music: "\f001",
   search: "\f002",
   heart: "\f004",
   star: "\f005",
   star-o: "\f006",
   user: "\f007",
   film: "\f008",
   th-large: "\f009",
   th: "\f00a",
   th-list: "\f00b",
   check: "\f00c",
   close: "\f00d",
   remove: "\f00d",
   times: "\f00d",
   search-plus: "\f00e",
   search-minus: "\f010",
   power-off: "\f011",
   signal: "\f012",
   cog: "\f013",
   gear: "\f013",
   trash-o: "\f014",
   home: "\f015",
   file-o: "\f016",
   clock-o: "\f017",
   download: "\f019",
   arrow-circle-o-down: "\f01a",
   arrow-circle-o-up: "\f01b",
   play-circle-o: "\f01d",
   repeat: "\f01e",
   rotate-right: "\f01e",
   refresh: "\f021",
   lock: "\f023",
   flag: "\f024",
   headphones: "\f025",
   volume-off: "\f026",
   volume-down: "\f027",
   volume-up: "\f028",
   tag: "\f02b",
   tags: "\f02c",
   book: "\f02d",
   bookmark: "\f02e",
   camera: "\f030",
   font: "\f031",
   bold: "\f032",
   italic: "\f033",
   text-height: "\f034",
   text-width: "\f035",
   align-left: "\f036",
   align-center: "\f037",
   align-right: "\f038",
   align-justify: "\f039",
   list: "\f03a",
   dedent: "\f03b",
   outdent: "\f03b",
   indent: "\f03c",
   video-camera: "\f03d",
   image: "\f03e",
   photo: "\f03e",
   picture-o: "\f03e",
   pencil: "\f040",
   map-marker: "\f041",
   adjust: "\f042",
   tint: "\f043",
   pause: "\f04c",
   stop: "\f04d",
   forward: "\f04e",
   fast-forward: "\f050",
   step-forward: "\f051",
   eject: "\f052",
   chevron-left: "\f053",
   chevron-right: "\f054",
   plus-circle: "\f055",
   minus-circle: "\f056",
   times-circle: "\f057",
   check-circle: "\f058",
   question-circle: "\f059",
   info-circle: "\f05a",
   arrow-right: "\f061",
   arrow-up: "\f062",
   arrow-down: "\f063",
   mail-forward: "\f064",
   share: "\f064",
   expand: "\f065",
   compress: "\f066",
   exclamation-circle: "\f06a",
   eye: "\f06e",
   eye-slash: "\f070",
   exclamation-triangle: "\f071",
   warning: "\f071",
   calendar: "\e904",
   random: "\f074",
   comment: "\f075",
   chevron-up: "\f077",
   chevron-down: "\f078",
   retweet: "\f079",
   shopping-cart: "\f07a",
   folder: "\f07b",
   folder-open: "\f07c",
   twitter-square: "\f081",
   facebook-square: "\f082",
   camera-retro: "\f083",
   thumbs-o-up: "\f087",
   thumbs-o-down: "\f088",
   sign-out: "\f08b",
   linkedin-square: "\f08c",
   github: "\f09b",
   unlock: "\f09c",
   credit-card: "\f09d",
   feed: "\f09e",
   rss: "\f09e",
   hdd-o: "\f0a0",
   bullhorn: "\f0a1",
   bell-o: "\f0a2",
   arrow-circle-left: "\f0a8",
   arrow-circle-right: "\f0a9",
   arrow-circle-up: "\f0aa",
   arrow-circle-down: "\f0ab",
   bars: "\f0c9",
   navicon: "\f0c9",
   reorder: "\f0c9",
   list-ul: "\f0ca",
   list-ol: "\f0cb",
   pinterest: "\f0d2",
   pinterest-square: "\f0d3",
   google-plus-square: "\f0d4",
   google-plus: "\f0d5",
   caret-down: "\f0d7",
   caret-up: "\f0d8",
   caret-left: "\f0d9",
   caret-right: "\f0da",
   sort-desc: "\f0dd",
   sort-down: "\f0dd",
   sort-asc: "\f0de",
   sort-up: "\f0de",
   cloud-download: "\f0ed",
   plus-square: "\f0fe",
   angle-double-left: "\f100",
   angle-double-right: "\f101",
   angle-double-up: "\f102",
   angle-double-down: "\f103",
   angle-left: "\f104",
   angle-right: "\f105",
   angle-up: "\f106",
   angle-down: "\f107",
   quote-left: "\f10d",
   quote-right: "\f10e",
   spinner: "\f110",
   circle: "\f111",
   folder-open-o: "\f115",
   smile-o: "\f118",
   frown-o: "\f119",
   meh-o: "\f11a",
   gamepad: "\f11b",
   code-fork: "\f126",
   exclamation: "\f12a",
   microphone: "\f130",
   microphone-slash: "\f131",
   chevron-circle-left: "\f137",
   chevron-circle-right: "\f138",
   chevron-circle-up: "\f139",
   chevron-circle-down: "\f13a",
   unlock-alt: "\f13e",
   ellipsis-h: "\f141",
   ellipsis-v: "\f142",
   rss-square: "\f143",
   play-circle: "\f144",
   minus-square: "\f146",
   minus-square-o: "\f147",
   check-square: "\f14a",
   pencil-square: "\f14b",
   external-link-square: "\f14c",
   share-square: "\f14d",
   thumbs-up: "\f164",
   thumbs-down: "\f165",
   youtube: "\f16a",
   dropbox: "\f16b",
   bitbucket: "\f171",
   tumblr-square: "\f174",
   apple: "\f179",
   windows: "\f17a",
   android: "\f17b",
   linux: "\f17c",
   female: "\f182",
   male: "\f183",
   arrow-circle-o-right: "\f18e",
   arrow-circle-o-left: "\f190",
   plus-square-o: "\f196",
   slack: "\f198",
   google: "\f1a0",
   drupal: "\f1a9",
   child: "\f1ae",
   automobile: "\f1b9",
   car: "\f1b9",
   file-pdf-o: "\f1c1",
   file-word-o: "\f1c2",
   file-excel-o: "\f1c3",
   file-powerpoint-o: "\f1c4",
   file-image-o: "\f1c5",
   file-photo-o: "\f1c5",
   file-picture-o: "\f1c5",
   file-archive-o: "\f1c6",
   file-zip-o: "\f1c6",
   file-audio-o: "\f1c7",
   file-sound-o: "\f1c7",
   file-movie-o: "\f1c8",
   file-video-o: "\f1c8",
   file-code-o: "\f1c9",
   qq: "\f1d6",
   wechat: "\f1d7",
   weixin: "\f1d7",
   paper-plane: "\f1d8",
   send: "\f1d8",
   circle-thin: "\f1db",
   cc-visa: "\f1f0",
   cc-mastercard: "\f1f1",
   cc-amex: "\f1f3",
   cc-paypal: "\f1f4",
   copyright: "\f1f9",
   area-chart: "\f1fe",
   pie-chart: "\f200",
   line-chart: "\f201",
   toggle-off: "\f204",
   toggle-on: "\f205",
   user-plus: "\f234",
   user-times: "\f235",
   bed: "\f236",
   hotel: "\f236",
   battery: "\f240",
   battery-4: "\f240",
   battery-full: "\f240",
   clone: "\f24d",
   industry: "\f275",
   map-o: "\f278",
   map: "\f279",
   commenting: "\f27a",
   pause-circle-o: "\f28c",
   stop-circle-o: "\f28e",
   question-circle-o: "\f29c",
   times-rectangle: "\f2d3",
   window-close: "\f2d3",
 )
);

Source: docroot/themes/contrib/district_base/styles/scss/settings/_icon.scss, line 262

1.9.7 #Atoms.settings.jumbotron-large Large banner

Settings used for the jumbotron primarily used on the homepage.

$jumbotron-content-width--large: calc((100vw * 0.4) - (100vw - #{map-get($duk-base-containers, 'large')})/2);
$jumbotron-home--height--small: 500px;
$jumbotron-home--height--medium: 400px;
$jumbotron-home--height--large: 500px;

Source: docroot/themes/contrib/district_base/styles/scss/settings/_jumbotron.scss, line 1

1.9.8 #Atoms.settings.layout-multi-column Multi column layout

Settings used for the layout-multi-column layout documented here.

// Define the number of available columns in the layout
$layout-multi-column-cols: 2, 3, 4;

Source: docroot/themes/contrib/district_base/styles/scss/settings/_layouts.scss, line 43

1.9.9 #Atoms.settings.layouts Layouts

$duk-content-min-height: 600px;

$duk-base-containers: (
 'x-small':    576px,
 'small':      768px,
 'medium':     992px,
 'large':      1200px,
 'x-large':    1440px,
 'xx-large':   1680px,
 'xxx-large':  1800px,
 'max':        1920px,
);

$duk-base-breakpoints: (
 'none': 0,
 'x-small': 300px,
 'small': 576px,
 'medium': 768px,
 'large': 992px,
 'x-large': 1200px,
 'xx-large': 1300px,
 'xxx-large': 1590px,
 'xxxx-large': 1800px,
);

$duk-base-breakpoint-states: (
 'desktop-menu':               x-large,
 'no-horizontal-gutter':       xx-large,
);

$duk-base-responsive-grids: (
 '4-col': (medium: 2, x-large: 4),
);

Source: docroot/themes/contrib/district_base/styles/scss/settings/_duk-settings.scss, line 287

1.9.10 #Atoms.settings.link-cta Link CTA

Settings used for the link--cta layout.
Settings can be retrieved using the link-cta-settings function, documented here

$link-cta: () !default;
$link-cta: map-merge((
 'bg-color':              duk-get-palette-color('tint'),
 'bg-color--hover':       duk-get-palette-color('primary'),
 'font-color':            duk-get-palette-color('primary'),
 'font-color--hover':     duk-get-palette-color('tertiary'),
 'radius':                3px,
 'button-size':           24px,
 'icon-bg-color':         duk-get-palette-color('secondary'),
 'icon-bg-color--hover':  duk-get-palette-color('secondary'),
 'icon-color':            duk-get-palette-color('primary'),
 'icon-color--hover':     duk-get-palette-color('tint'),
 'icon-name':             'arrow-default-right',
 'icon-size':             0.5em,
 'icon-radius':           3px,
), $link-cta);

Source: docroot/themes/contrib/district_base/styles/scss/settings/_layouts.scss, line 1

1.9.11 #Atoms.settings.spacing-unit Spacing unit

$duk-base-spacing-unit:       1rem;
$duk-half-spacing-unit:       $duk-base-spacing-unit / 2;
$duk-quarter-spacing-unit:    $duk-base-spacing-unit / 4;
$duk-one-n-half-spacing-unit: $duk-base-spacing-unit * 1.5;
$duk-double-spacing-unit:     $duk-base-spacing-unit * 2;
$duk-triple-spacing-unit:     $duk-base-spacing-unit * 3;
$duk-quad-spacing-unit:       $duk-base-spacing-unit * 4;

Source: docroot/themes/contrib/district_base/styles/scss/settings/_duk-settings.scss, line 7

1.9.12 #Atoms.settings.typography Typography

$duk-base-font-family: 'tt_commons', sans-serif;

$duk-base-font-sizes: (
 'h1':       (size: 2.1em, height: 1.4),
 'h2':       (size: 2.0em, height: 1.4),
 'h5':       (size: 1.3em, height: 1.4),
 'h4':       (size: 1.2em, height: $duk-base-line-height),
);

$duk-base-font-weights: (
 'regular':    400,
 'medium':     600,
 'bold':       700,
);

Loading Fonts

You can update `$duk-base-font-includes` per sub theme to load theme specific
fonts. This can also be assigned a url for externally loaded fonts.
Set to false to disable this functionality all together.

$duk-base-font-includes: (
 'tt_commons': (
   path : '../../fonts/tt_commons',
   formats: ('woff', 'woff2'),
   variants: (
     ('tt_commons_regular-webfont', 400, normal),
     ('tt_commons_medium-webfont', 500, normal),
     ('tt_commons_demibold-webfont', 700, normal),
   ),
 ),
);

Source: docroot/themes/contrib/district_base/styles/scss/settings/_duk-settings.scss, line 28

1.10 #Atoms.tags Tags

Source: docroot/themes/contrib/district_base/styles/scss/components/_category-tags.scss, line 1

1.10.1 #Atoms.tags.category-tags Category tags

Defines tag styles for categories

Example

Secondary category style

Markup

<div class="category-tags category-tags--secondary">
  <a>Secondary category style</a>
<div>

Source: docroot/themes/contrib/district_base/styles/scss/components/_category-tags.scss, line 5

1.11 #Atoms.typography Typography

Source: docroot/themes/contrib/district_base/styles/scss/base/_typography.scss, line 13

1.11.1 #Atoms.typography.headings Headings

All headings. Styled with duk-headings().

Example

This is a heading 1

This is a Heading 2

This is a Heading 3

This is a Heading 4

This is a Heading 5

This is a Heading 6

Markup

  <h1>This is a heading 1</h1>
  <h2>This is a Heading 2</h2>
  <h3>This is a Heading 3</h3>
  <h4>This is a Heading 4</h4>
  <h5>This is a Heading 5</h5>
  <h6>This is a Heading 6</h6>

Source: docroot/themes/contrib/district_base/styles/scss/base/_typography.scss, line 17

1.11.2 #Atoms.typography.text Text

Basic text styles including links, strong, underline, em.

Example

This is lead text

Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding halvah bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear claw tootsie roll jujubes.

This is description text

Jelly donut dragée sweet roll sesame snaps tootsie roll. Halvah powder chocolate cake pudding. Candy fruitcake jelly beans cake. Marshmallow jelly apple pie cookie. Wafer chupa chups powder wafer. Danish cake candy.

Markup

  <p class="lead">This is lead text</p>
  <p>Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie
  dessert sugar plum toffee <a href="#">marzipan bonbon sesame</a> snaps halvah.
  Macaroon croissant sweet cheesecake. <em>Croissant icing</em> muffin. Gingerbread
  pudding halvah bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear
  claw <u>tootsie roll jujubes</u>.</p>
  <p class="description">This is description text</p>
  <p>Jelly donut dragée sweet <a href="#">roll</a> sesame snaps <strong>tootsie
  roll</strong>. Halvah powder chocolate cake pudding. Candy fruitcake jelly
  beans cake. Marshmallow jelly apple pie cookie. Wafer chupa chups powder wafer.
  <em>Danish cake candy</em>.</p>

Source: docroot/themes/contrib/district_base/styles/scss/base/_typography.scss, line 34

1.11.3 #Atoms.typography.text-body Body text

Default typography for any body text content. Applied to all generic field body fields rather than as a sitewide default.

Example

Heading 2

Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding halvah bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear claw tootsie roll jujubes.

Heading 3

Jelly donut dragée sweet roll sesame snaps tootsie roll. Halvah powder chocolate cake pudding. Candy fruitcake jelly beans cake. Marshmallow jelly apple pie cookie. Wafer chupa chups powder wafer. Danish cake candy.

Markup

  <div class="text-body">
  <h2>Heading 2</h2>
  <p>Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie
  dessert sugar plum toffee <a href="#">marzipan bonbon sesame</a> snaps halvah.
  Macaroon croissant sweet cheesecake. <em>Croissant icing</em> muffin. Gingerbread
  pudding halvah bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear
  claw <u>tootsie roll jujubes</u>.</p>
  <h3>Heading 3</h3>
  <p>Jelly donut dragée sweet <a href="#">roll</a> sesame snaps <strong>tootsie
  roll</strong>. Halvah powder chocolate cake pudding. Candy fruitcake jelly
  beans cake. Marshmallow jelly apple pie cookie. Wafer chupa chups powder wafer.
  <em>Danish cake candy</em>.</p>
  </div>

Source: docroot/themes/contrib/district_base/styles/scss/objects/_text-body.scss, line 1