Sweco visual identity manual
Digital Platformsv5.1.2

Quickly get a project started with the brand's visual identity. Build your app with our styles, variables and utilities, responsive grid system, prebuilt components.

Sweco visual identity manual
Digital Platformsv5.1.2

The brand's visual identity

The brand's visual identity is an important tool for creating differentiation and consistency. The visual identity manual regulates how we use Sweco's logotype, typography, colors and other visual building blocks. Sweco's visual identity manual for digital platforms must be followed in all digital platforms connected to the Sweco brand. Not all platforms allow a design change in line with all the guidelines. If there are limitations prioritize according to the following order:

1. The Sweco logotype 2. Sweco colors 3. Sweco typography

The final design of digital platforms for Sweco group has to be approved by the group Communication department. Digital platforms for local markets must be approved by the country Communication department.

Versions and release notes

Read more about versions and release notes in the changelog

The guidelines

The guidelines contain layout options for structuring a Sweco application with Bootstrap 4, including global styles, required scaffolding and grid system. It also covers styles for displaying content and HTML elements, including normalization, typography, tables and more. Components are provided to build buttons and dropdowns, forms, navigation and much more.

Sweco's visual guidelines for digital platforms are provided in a Sweco CDN or as NPM package to quickly add Sweco's visual identity to your project. Read more about download source code. To be sure to have your pages set up with the latest design and development standards use the starter template.

Use your browser web inspector in developer tools to copy HTML examples from this page.

Sweco's digital platforms resources

You can use Sweco's digital platforms resources fonts, logotypes, icons, favicons, Bootstrap js, Sweco components js. Resources available in the Sweco CDN (content delivery network).

Sweco's digital platforms resources

The Sweco logotype

The logotype has two different colour settings

WhiteWhite against medium dark to dark backgrounds.

BlackBlack on white or light backgrounds.

The logotype shall be treated with respect and may never be displayed out of proportion, with an incorrect resolution or with an incorrect size ratio, etc.

The Sweco logotype is included in the css with correct proportions and SVG:s is also included in package.

Sizes included .logotype, .logotype-md and .logotype-lg.

Sweco's logotype can never be

  1. Split up. The Sweco name and symbol in the logotype form a coherent unit which may never be separated or used individually.
  2. Combined. The logotype is always displayed on its own. It may never be combined with names of other business areas, images or with other text messages.
  3. Misrepresented. The logotype's appearance is trademark protected and may not be altered. The wordmark may not be written in any other font. The symbol may not be substituted with any other symbols.

White.logotype-white

SWECO

SWECO

SWECO

CDN hosted svg logotype white

https://cdn.swecogroup.com/sweco-digital-platforms/VERSION/logotype/sweco-logotype-white.svg

Black.logotype-black

SWECO

SWECO

SWECO

CDN hosted svg logotype black

https://cdn.swecogroup.com/sweco-digital-platforms/VERSION/logotype/sweco-logotype-black.svg

Sweco colors

The basis of Sweco's colour scale is a grayscale that progresses from white to black. The grayscale is complemented with nine selected brand coloursand three muted, to meet the requirement of a wider colour palette. The colours have been selected to work well together and in harmony with the grayscale.

Sweco's colour scale is flexible and full of expression, but there are some simple guidelines that create harmony and consistency in application.

  1. The grayscale, from lighter gray to black, is the basis and is used throughout in all designs. White is used to give an airy and clean composition. Use the gray colours consistently and on large areas to create a calm feeling. Not all gray colours need to be used in all designs; they can alternate between context and production.
  2. The colours are complementary and are used to accentuate and create tension. It is also possible to use them full cover, but consistently and with moderation.
  3. Never use more than two complementary colours per production, that often makes it confusing and unclear. An exception is information graphics.

Grayscale

  • black#000000
  • gray-dark#3f3f42
  • gray#a4a4a6
  • gray-light#e2e0da
  • gray-lighter#f3f3f0

Brand colors

  • green-dark#7a9b62
  • green#9dd354
  • green-light#c4e598
  • green-lighter#e6f4d4
  • blue-dark#8595af
  • blue#c0d4fd
  • blue-light#d9e5fe
  • blue-lighter#eff4fe
  • ochre-dark#a48730
  • ochre#dec55b
  • ochre-light#ebdc9d
  • ochre-lighter#f7f0d6

Validation colors

  • alert#821307
  • success#7a9b62

Color and class

For background-color add class="bg-..." example: class="bg-green-light" For text color add class="text-..." example: class="text-green-light"

Typography

Sweco's visual identity is based on a strong, unique and distinct typography. In collaboration with the characteristic Sweco logo the typography differentiates us from other companies in our industry.

Sweco Sans is inspired by the functional form of structural drawings, it encapsulated the essence of the business - planning and designing the communities and cities of the future.

Arial is used if the platform doesn't allow the usage of Sweco Sans or if it's difficult to implement the Sweco Sans font.

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5
Heading h6
Font-size-xs
Font-size-sm
Font-size-base
Font-size-lg
Font-size-xl

Inline text

  • This line has inline link, how a default link is displayed.
  • You can use the mark tag to highlight text.
  • This is muted text
  • This line of text is meant to be treated as deleted text.
  • This line of text is meant to be treated as no longer accurate.
  • This line of text is meant to be treated as an addition to the document.
  • This line of text will render as underlined
  • This line of text is meant to be treated as fine print.
  • This line rendered as strong bold text.
  • This line rendered as italicized text.
  • This is attr
  • This is abbreviations HTML
  • Variables y = mx + b
  • This is sup and sub Penguins and °Climate* CO2
  • User inputs looks like this ctrl + ,
  • The code element.
<pre>
  <code>This is a pre code block</code>
</pre>

Standard paragraph heading h3

This is lead paragraph, sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

The standard paragraph, lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Blockquote, adipiscing elit. Integer posuere lorem.

Person Persona Source Title

Lists

  • Unordered list
  • Unordered list
    • Nested unordered list
    • Nested unordered list
  • Unordered list
    • Nested unordered list unstyled
    • Nested unordered list unstyled
    • Nested unordered list unstyled
  • Unordered list
  1. Ordered list
  2. Ordered list
    • Nested unordered list unstyled
    • Nested unordered list unstyled
    • Nested unordered list unstyled
  3. Ordered list
  4. Ordered list
Description list
A description list is perfect for defining terms.
Description list
A description list is perfect for defining terms.
Description list
A description list is perfect for defining terms.

Table

# Header content Header content Header content
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content

Table small

table table-sm

# Header content Header content Header content
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content

Table styles

table-bordered table-hover and there is one style for no borders at all table-borderless

# Header content Header content Header content
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content

Grid

It's fundamental to everything we design. The grid is the geometric foundation of all the visual elements, from typography to spacing, logotype, icons, and sizing. It provides structure and guidance for all creative decision-making. The grid geometry is the 8 pixel square unit for consistent visual rhythm. Page default font-size 16px is assumed (the browser default). font-size: 1rem is applied on the body for easy responsive type-scaling.

The grid is mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers.

Gutter

Gutters are the spaces between columns. They help separate content. The margin around each grid box matches its padding, for a total gutter of 32 pixels. For closely related content, consider a gutterless grid apply class
no-gutters to row. Apply gutters when content warrants more separation.

Containers

Read more about containers.

container, which sets a max-width at each responsive breakpoint

container-fluid, which is width: 100% at all breakpoints

Spacing

The classes are named using the format property sides-size for xs and property sides-breakpoint-size for sm, md, lg, and xl. Read more about spacing utilities.

m - property for classes that set margin

p - property for classes that set padding

Size rem px Example
-1 0.25 4
-2 0.5 8
-3 1 16
-4 1.5 24
-5 2 32
-6 2.5 40
-7 3 48
-8 3.5 56
-21Max 10 160
-0 For classes that eliminate the margin or padding by setting it to 0
-auto Auto - for classes that set the margin to auto

Buttons

Button primary

Button secondary

Button destructive, warning, delete

Button disabled

NOTICE: In general, we avoid disabled states, we prefer to show buttons if needed, outerwise hide the button.

Button sizes

Dropdowns

Action Active item Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link

Dropdown multilevel

Filter button

Filter button small

Button group

Left Button Right

Button group vertical

Button group toggle

Button group vertical toggle

Button block

Nav tabs small

Nav tabs

Nav pills

Nav pills Stacked (flex-column)

Breadcrumb

Pagination

Accordion

Some quick lorem ipsum example text to build on the card title and make up the bulk of the cards content.

Some quick lorem ipsum example text to build on the card title and make up the bulk of the cards content.

Some quick lorem ipsum example text to build on the card title and make up the bulk of the cards content.

Navbar

Fixed navbars

If your application is using the fixed navbars, add class for north navbar-north and south navbar-south to navbar. And add class to <body> for north <body class="navbarNorth"> for both north and south add <body class="navbarNorth navbarSouth">

Fixed navbar south

Toggle fixed navbar south example:

Offcanvas

Offcanvas can be used for collapsing content on small screens. Resize screen to see the right side navigation go offcanvas.

List group

Lorem ipsum dolor sit amet Active list group item Lorem ipsum Lorem ipsum dolor sit Disabled list group item Lorem ipsum dolor sit amet
Active list group item 14 Lorem ipsum 3 Lorem ipsum dolor sit 1 Lorem ipsum dolor sit amet Lorem ipsum Lorem ipsum dolor sit
List group item heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Active list group heading

Lorem ipsum dolor sit amet, consectetur adipiscing.
List group item heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.

Forms

Remember, all inputs must have a type attribute and class form-control

Input

Form size

Validation

Example help text that remains unchanged.
Example help text that remains unchanged.

Alerts

Badge

Badge Primary Warning Success Info Outline

Badge small

0 1 2 3 4 5

Badge large

0 1 2 3 4 5

Icons

  • Firsthand use icons light <i class="fa-light fa-users"></i>
  • Secondhand use icons regular <i class="fa-regular fa-users"></i>
  • More examples of how to use see examples.
Include Font Awesome Pro icons from CDN resources

Spinner

<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border spinner-border-white" role="status">
  <span class="sr-only">Loading...</span>
</div>
<button class="btn btn-primary" type="button">
  <span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>
</button>

Wizard steps

Add class active on the step being worked on add done when the step it is complete. The .step-header can also be link instead of span tag.

Steps vertical

  • 1 Step one
  • 2 Step two
  • 3 Step Three
  • 4 Last one

Steps

  • 1 Step one
  • 2 Step two
  • 3 Step Three
  • 4 Last one

Card

A card is a flexible and extensible content container. It includes options for headers and footers. Read more about cards

Card

Some quick lorem ipsum example text to build on the card title and make up the bulk of the cards content.

Lorem ipsum

Card

Some quick lorem ipsum example text to build on the card title and make up the bulk of the cards content.

Lorem ipsum

Card

Some quick lorem ipsum example text to build on the card title and make up the bulk of the cards content.

Lorem ipsum

Card

Some quick lorem ipsum example text to build on the card title and make up the bulk of the cards content.

Lorem ipsum

Components

Read more about modals

Toast message

Read more about toast

Datetimepicker

Read more about datetimepicker.

Popovers

Read more about popovers

Collapse

Read more about collapse

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Typeahead

Read more about typeahead.

Tooltips

Read more about tooltips

Progress indicator

Read more about ProgressBar JS.

Frontpage

The frontpage is a welcome showcasing hero unit for your Sweco application, it's an overlay and can also be used when a reset of the application is done. When frontpage is shown add class
front-page-show to body. The selected background-image for the application has to be approved by the group Communication department.

Starter template

Replace VERSION and integrity HASH with the desired version of Sweco digital platforms, latest version 5.1.2 is to recommend, see changelog and release notes.

<!doctype html>
<html lang="en">
  <head>

    <meta charset="utf-8" />
    <meta http-equiv="Content-Language" content="en" />
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" />
    <meta name="description" content="Sweco" />

    <title>Sweco - Application name</title>

    <link rel="shortcut icon" href="https://cdn.swecogroup.com/sweco-digital-platforms/VERSION/manifest/favicon.ico" />
    <link rel="icon" type="image/png" sizes="16x16" href="https://cdn.swecogroup.com/sweco-digital-platforms/VERSION/manifest/favicon-16x16.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="https://cdn.swecogroup.com/sweco-digital-platforms/VERSION/manifest/favicon-32x32.png" />
    <link rel="apple-touch-icon" href="https://cdn.swecogroup.com/sweco-digital-platforms/VERSION/manifest/apple-touch-icon.png" />

    <meta property="og:image" content="https://cdn.swecogroup.com/sweco-digital-platforms/VERSION/manifest/socialmedia-logotype.png" />
    <meta name="twitter:image" content="https://cdn.swecogroup.com/sweco-digital-platforms/VERSION/manifest/socialmedia-logotype.png" />
    <meta name="msapplication-config" content="https://cdn.swecogroup.com/sweco-digital-platforms/VERSION/manifest/browserconfig.xml" />
    <link rel="manifest" href="https://cdn.swecogroup.com/sweco-digital-platforms/VERSION/manifest.json" />

    <link rel="stylesheet" href="https://cdn.swecogroup.com/sweco-digital-platforms/VERSION/fonts/fonts.css" />
    <link rel="stylesheet" href="https://cdn.swecogroup.com/sweco-digital-platforms/VERSION/icons/css/all.min.css" />
    <link rel="stylesheet" href="https://cdn.swecogroup.com/sweco-digital-platforms/VERSION/css/sweco-bootstrap.css" />

  </head>
  <body>

    <section class="container">
      <h1>Hello, world!</h1>
    </section>

    <script src="https://cdn.swecogroup.com/sweco-digital-platforms/VERSION/js/sweco-bootstrap.js" integrity="HASH" crossorigin="anonymous"></script>
    <script src="https://cdn.swecogroup.com/sweco-digital-platforms/VERSION/js/sweco-components.js" integrity="HASH" crossorigin="anonymous"></script>

  </body>
</html>

Include CDN resources in your project

Skip the download use the Sweco CDN to deliver cached version of Sweco's digital platforms resources in your project.

Replace VERSION and integrity HASH with the desired version of Sweco digital platforms, latest version 5.1.2 is to recommend, see changelog and release notes.

JavaScript

<script src="https://cdn.swecogroup.com/sweco-digital-platforms/5.1.2/js/sweco-bootstrap.js" integrity="HASH" crossorigin="anonymous"></script>
<script src="https://cdn.swecogroup.com/sweco-digital-platforms/5.1.2/js/sweco-components.js" integrity="HASH" crossorigin="anonymous"></script>

CSS

<link rel="stylesheet" href="https://cdn.swecogroup.com/sweco-digital-platforms/5.1.2/css/sweco-bootstrap.css" />

Fonts

<link rel="stylesheet" href="https://cdn.swecogroup.com/sweco-digital-platforms/5.1.2/fonts/fonts.css" />

Icons - Font Awesome Pro

<link rel="stylesheet" href="https://cdn.swecogroup.com/sweco-digital-platforms/5.1.2/icons/css/all.min.css" />

Favicons and manifest

Favicons and app icons to include in your project head.

<link rel="shortcut icon" href="https://cdn.swecogroup.com/sweco-digital-platforms/5.1.2/manifest/favicon.ico" />
<link rel="icon" type="image/png" sizes="16x16" href="https://cdn.swecogroup.com/sweco-digital-platforms/5.1.2/manifest/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="https://cdn.swecogroup.com/sweco-digital-platforms/5.1.2/manifest/favicon-32x32.png" />
<link rel="apple-touch-icon" href="https://cdn.swecogroup.com/sweco-digital-platforms/5.1.2/manifest/apple-touch-icon.png" />

<meta property="og:image" content="https://cdn.swecogroup.com/sweco-digital-platforms/5.1.2/manifest/socialmedia-logotype.png" />
<meta name="twitter:image" content="https://cdn.swecogroup.com/sweco-digital-platforms/5.1.2/manifest/socialmedia-logotype.png" />
<meta name="msapplication-config" content="https://cdn.swecogroup.com/sweco-digital-platforms/5.1.2/manifest/browserconfig.xml" />
<link rel="manifest" href="https://cdn.swecogroup.com/sweco-digital-platforms/5.1.2/manifest.json" />

NPM install

You can install the latest version via the registry NPM:

npm install @sweco/sweco-digital-platforms

Within the NPM package you'll find the following directories and files:

sweco-digital-platforms/
├── scss
│   ├── bootstrap/*.scss
│   ├── styles.scss
│   └── *.scss
├── js (built artifacts)
│   ├── sweco-bootstrap.js
│   └── sweco-components.js
├── css (built artifacts)
│   └── sweco-bootstrap.css
└── index.html

Build tools

Compile with your own asset pipeline. This option requires some additional tooling: Sass, Autoprefixer.

Frameworks and dependencies

Frameworks and dependencies to help bring some of our components to life.

Included in /js/sweco-bootstrap.js
Included in /js/sweco-components.js

Changelog

Version and release notes.

5.1.2

Release 2022-08-17

  • Sweco 2022 colors
  • Sweco 2022 buttons, links and forms styling
  • Fonts, Sweco Sans v1.6.0
  • Icons, Font Awesome v.6.1.1
  • Bootstrap v4.6.1
  • Dependencies version bumps for potential security vulnerabilities.
  • NOTICE: This will be the last version supporting Bootstrap 4, next release will be Bootstrap 5.

CDN

https://cdn.swecogroup.com/sweco-digital-platforms/5.1.2

NPM

https://npm.pkg.github.com/sweco/v/5.1.2

Scripts and integrity HASH

<script src="https://cdn.swecogroup.com/sweco-digital-platforms/5.1.2/js/sweco-bootstrap.js" integrity="sha384-Ou6Fhij3Mr9+Gpkp5lnjuiGK1xpNRhrq7vYCbUDhFouZri3ORywP/zNLBAyU4iti" crossorigin="anonymous"></script>
<script src="https://cdn.swecogroup.com/sweco-digital-platforms/5.1.2/js/sweco-components.js" integrity="sha384-jkeMugP4dX0PGtH52ESPFovS4DziJXxyFok3FCKcT/krY6UynLr0srEeHhEDKftU" crossorigin="anonymous"></script>

5.0.41

Release 2020-08-17

  • Bootstrap v4.5.2
  • Search icon for React-BS Typeahead.
  • Navbar south min-height fix.
  • Navbar fixed-bottom dropdown dropup position fix.

CDN

https://cdn.swecogroup.com/sweco-digital-platforms/5.0.41

NPM

https://npm.pkg.github.com/sweco/v/5.0.41

Scripts and integrity HASH

<script src="https://cdn.swecogroup.com/sweco-digital-platforms/5.0.41/js/sweco-bootstrap.js" integrity="sha384-uphfrx/FdMU65cLhr3i02OjQTduwQUjNvCX4C8xpX0I4RqaoIAyv3tpoStNEl5Yt" crossorigin="anonymous"></script>
<script src="https://cdn.swecogroup.com/sweco-digital-platforms/5.0.41/js/sweco-components.js" integrity="sha384-rTUxmhEKi6qrUnAcqlURdF/uERHkaBet0o4K/qXPMvxEKGkujxy9wvn55TAwd1SI" crossorigin="anonymous"></script>

5.0.33

Release 2020-06-12

  • Dropdown caret position, change for better grid position.
  • Navbar dropdowns, typeahead more visible from parent.
  • Search select dropdown example.

CDN

https://cdn.swecogroup.com/sweco-digital-platforms/5.0.33

NPM

https://npm.pkg.github.com/sweco/v/5.0.33

Scripts and integrity HASH

<script src="https://cdn.swecogroup.com/sweco-digital-platforms/5.0.33/js/sweco-bootstrap.js" integrity="sha384-CQ3pI2uYQ6btgSpOHKJEVs7ltf3BbKwAZOBAa119aUApMyFwkY2XGsTcUi4uKIKP" crossorigin="anonymous"></script>
<script src="https://cdn.swecogroup.com/sweco-digital-platforms/5.0.33/js/sweco-components.js" integrity="sha384-s1GefNivTT16czXLyabR97cbvyHGeuY94YGFQFWYTPrz9ao4a1VtcxMxUj7VA8Eh" crossorigin="anonymous"></script>

5.0.32

Release 2020-06-08

  • Dropdown, dropdown-header class adjustment for React-BS
  • Accordion card-header 40px height, y padding matches the 8 grid system.
  • Page modal header padding adjustments for large screens.
  • Navbar nav-toolbar fixed z-index.

CDN

https://cdn.swecogroup.com/sweco-digital-platforms/5.0.32

NPM

https://npm.pkg.github.com/sweco/v/5.0.32

Scripts and integrity HASH

<script src="https://cdn.swecogroup.com/sweco-digital-platforms/5.0.32/js/sweco-bootstrap.js" integrity="sha384-CQ3pI2uYQ6btgSpOHKJEVs7ltf3BbKwAZOBAa119aUApMyFwkY2XGsTcUi4uKIKP" crossorigin="anonymous"></script>
<script src="https://cdn.swecogroup.com/sweco-digital-platforms/5.0.32/js/sweco-components.js" integrity="sha384-s1GefNivTT16czXLyabR97cbvyHGeuY94YGFQFWYTPrz9ao4a1VtcxMxUj7VA8Eh" crossorigin="anonymous"></script>

5.0.31

Release 2020-06-02

  • Language menu in navbar example.
  • More spacing utilities property classes up to 21 (10 x 16 = 160px).

CDN

https://cdn.swecogroup.com/sweco-digital-platforms/5.0.31

NPM

https://npm.pkg.github.com/sweco/v/5.0.31

Scripts and integrity HASH

<script src="https://cdn.swecogroup.com/sweco-digital-platforms/5.0.31/js/sweco-bootstrap.js" integrity="sha384-CQ3pI2uYQ6btgSpOHKJEVs7ltf3BbKwAZOBAa119aUApMyFwkY2XGsTcUi4uKIKP" crossorigin="anonymous"></script>
<script src="https://cdn.swecogroup.com/sweco-digital-platforms/5.0.31/js/sweco-components.js" integrity="sha384-s1GefNivTT16czXLyabR97cbvyHGeuY94YGFQFWYTPrz9ao4a1VtcxMxUj7VA8Eh" crossorigin="anonymous"></script>

5.0.30

Release 2020-06-01

  • This version includes some version bumps on dependencies and some minor layout bug fixes.
  • Bootstrap v4.5.0
  • Jquery v3.5.1
  • Moment v2.26.0
  • bs-custom-file-input v.1.3.4
  • Navbar search form general config for styling.
  • Jumbo and lead gets new breakpoint smaller screens.
  • .btn-user and .btn-faq extends .btn-icon.
  • .page-modal header fix for smallscreens and .modal-title font-size h4.

CDN

https://cdn.swecogroup.com/sweco-digital-platforms/5.0.30

NPM

https://npm.pkg.github.com/sweco/v/5.0.30

Scripts and integrity HASH

<script src="https://cdn.swecogroup.com/sweco-digital-platforms/5.0.30/js/sweco-bootstrap.js" integrity="sha384-CQ3pI2uYQ6btgSpOHKJEVs7ltf3BbKwAZOBAa119aUApMyFwkY2XGsTcUi4uKIKP" crossorigin="anonymous"></script>
<script src="https://cdn.swecogroup.com/sweco-digital-platforms/5.0.30/js/sweco-components.js" integrity="sha384-s1GefNivTT16czXLyabR97cbvyHGeuY94YGFQFWYTPrz9ao4a1VtcxMxUj7VA8Eh" crossorigin="anonymous"></script>

5.0.29

Release 2020-04-04

  • Font Awesome Pro Version 5.13.0

CDN

https://cdn.swecogroup.com/sweco-digital-platforms/5.0.29

NPM

https://npm.pkg.github.com/sweco/v/5.0.29

Scripts and integrity HASH

<script src="https://cdn.swecogroup.com/sweco-digital-platforms/5.0.29/js/sweco-bootstrap.js" integrity="sha384-QCuEZICX6WcWaig1XLuaZyOE6AyNKmKJEd7T0IfZD0+Z1PX7JJtxGA3A+7B9Q8FR" crossorigin="anonymous"></script>
<script src="https://cdn.swecogroup.com/sweco-digital-platforms/5.0.29/js/sweco-components.js" integrity="sha384-6JtThQbKIT9vexYDjtN3MyGzCsuvOExMzlwVFb9ayjpyZu2L25sYgA9wSd6qv0ta" crossorigin="anonymous"></script>

5.0.28

Release 2020-04-03

  • Navbar search form typeahead demo example.
  • Navbar search form reset button demo example.
  • Navbar search autocomplete dropdown adjustements for backward compatibility.
  • The old show and hide class is back for backward compatibility.
  • h5 gets 24px line-height to match the 8px-grid.
  • Styles for Sweco Contact.
  • Offcanvas styles for small screens and example.

CDN

https://cdn.swecogroup.com/sweco-digital-platforms/5.0.28

NPM

https://npm.pkg.github.com/sweco/v/5.0.28

Scripts and integrity HASH

<script src="https://cdn.swecogroup.com/sweco-digital-platforms/5.0.28/js/sweco-bootstrap.js" integrity="sha384-QCuEZICX6WcWaig1XLuaZyOE6AyNKmKJEd7T0IfZD0+Z1PX7JJtxGA3A+7B9Q8FR" crossorigin="anonymous"></script>
<script src="https://cdn.swecogroup.com/sweco-digital-platforms/5.0.28/js/sweco-components.js" integrity="sha384-6JtThQbKIT9vexYDjtN3MyGzCsuvOExMzlwVFb9ayjpyZu2L25sYgA9wSd6qv0ta" crossorigin="anonymous"></script>

5.0.27

Release 2020-03-24

  • Changelog easier to read.
  • Version is now predefined in cdn download url:s.
  • Description of css file name corrected, style.css to sweco-bootstrap.css
  • btn-info color adjustments to the same as btn-primary.
  • .navbar-search gets a relative div .navbar-search-form for typeahead dropdowns.
  • Navbar search typeahead dropdown styles.

CDN

https://cdn.swecogroup.com/sweco-digital-platforms/5.0.27

NPM

https://npm.pkg.github.com/sweco/v/5.0.27

Scripts and integrity HASH

<script src="https://cdn.swecogroup.com/sweco-digital-platforms/5.0.27/js/sweco-bootstrap.js" integrity="sha384-QCuEZICX6WcWaig1XLuaZyOE6AyNKmKJEd7T0IfZD0+Z1PX7JJtxGA3A+7B9Q8FR" crossorigin="anonymous"></script>
<script src="https://cdn.swecogroup.com/sweco-digital-platforms/5.0.27/js/sweco-components.js" integrity="sha384-6JtThQbKIT9vexYDjtN3MyGzCsuvOExMzlwVFb9ayjpyZu2L25sYgA9wSd6qv0ta" crossorigin="anonymous"></script>

5.0.26

Release 2020-03-03

  • IE input type range bug fix.
  • Progressjs (non-maintained) replaced with ProgressBar JS. For usage, please read the ProgressBar JS api.

CDN

https://cdn.swecogroup.com/sweco-digital-platforms/5.0.26

NPM

https://npm.pkg.github.com/sweco/v/5.0.26

Scripts and integrity HASH

<script src="https://cdn.swecogroup.com/sweco-digital-platforms/5.0.26/js/sweco-bootstrap.js" integrity="sha384-QCuEZICX6WcWaig1XLuaZyOE6AyNKmKJEd7T0IfZD0+Z1PX7JJtxGA3A+7B9Q8FR" crossorigin="anonymous"></script>
<script src="https://cdn.swecogroup.com/sweco-digital-platforms/5.0.26/js/sweco-components.js" integrity="sha384-6JtThQbKIT9vexYDjtN3MyGzCsuvOExMzlwVFb9ayjpyZu2L25sYgA9wSd6qv0ta" crossorigin="anonymous"></script>

5.0.25

Release 2020-02-28

  • Default table cell padding left/right tighter .5rem.
  • Navbar-toggler collapse React BS fix.
  • Navbar nav, removed margin bottom.
  • New badge-info, $info is now ochre color. Fix for history reasons $info gets $primary for well-info, alert-info and datepicker.
  • More example details regarding wells and cards.
  • Nav pills Stacked (flex-column), now with styles for sub nav.

CDN

https://cdn.swecogroup.com/sweco-digital-platforms/5.0.25

NPM

https://npm.pkg.github.com/sweco/v/5.0.25

Scripts and integrity HASH

<script src="https://cdn.swecogroup.com/sweco-digital-platforms/5.0.25/js/sweco-bootstrap.js" integrity="sha384-QCuEZICX6WcWaig1XLuaZyOE6AyNKmKJEd7T0IfZD0+Z1PX7JJtxGA3A+7B9Q8FR" crossorigin="anonymous"></script>
<script src="https://cdn.swecogroup.com/sweco-digital-platforms/5.0.25/js/sweco-components.js" integrity="sha384-ONXS/2aEMnWQf9XPYDRexVU9Tn5n+VjDaKkO0IYh4sqLEGeZ3qJKIki0GtYpbt19" crossorigin="anonymous"></script>

5.0.22

Release 2020-02-25

  • Bootstrap v4.4.1
  • The grid, grid geometry is the 8-pixel square unit for consistent visual rhythm.
  • Guidelines for the grid system.
  • Typography has been reviewed for the 8 pixel square unit and grid.
  • Gray colors has been reviewed for better contrast.
  • Navbars redesigned.
  • Table classes now follows Bootstrap standard.
  • New component, wizard steps.
  • New navigation component, mini tabs.
  • Sweco headers, legends and labels is from now on not uppercase.
  • Sweco Green, a new color. New validation color class.
  • Spinner and input range styles.
  • Navbar-toggler, not collapsed fix for React Bootstrap
  • Manifest icons and socialmedia meta example

CDN

https://cdn.swecogroup.com/sweco-digital-platforms/5.0.22

NPM

https://npm.pkg.github.com/sweco/v/5.0.22

Scripts and integrity HASH

<script src="https://cdn.swecogroup.com/sweco-digital-platforms/5.0.22/js/sweco-bootstrap.js" integrity="sha384-QCuEZICX6WcWaig1XLuaZyOE6AyNKmKJEd7T0IfZD0+Z1PX7JJtxGA3A+7B9Q8FR" crossorigin="anonymous"></script>
<script src="https://cdn.swecogroup.com/sweco-digital-platforms/5.0.22/js/sweco-components.js" integrity="sha384-ONXS/2aEMnWQf9XPYDRexVU9Tn5n+VjDaKkO0IYh4sqLEGeZ3qJKIki0GtYpbt19" crossorigin="anonymous"></script>

Bugs and feature requests