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:
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.
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.
Sweco's digital platforms without Bootstrap
You can use Sweco's digital platforms resources. Resources available in the Sweco CDN are fonts, logotypes, icons, manifest icons.
Releases and changelog
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
- Split up. The Sweco name and symbol in the logotype form a coherent unit which may never be separated or used individually.
- 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.
- 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 eight selected brand colours, four of which are bright and crispy and four which are muted and saturated. 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.
- The grayscale, from light 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.
- 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.
- Never use more than two complementary colours per production, that often makes it confusing and unclear. An exception is information graphics.
Grayscale
- .black
- .black-ich
- .black-light *
#3a3a3a
- .black-lighter
- .black-ultralight
- .black-superlight
- .dark-gray
#3f3f42
- .dark-gray-ich
- .dark-gray-light
- .dark-gray-lighter
- .dark-gray-ultralight
- .dark-gray-superlight
- .gray
#a4a4a6
- .gray-ich
- .gray-light
- .gray-lighter
- .gray-ultralight
- .gray-superlight
- .light-gray
#e2e0da
- .light-gray-ich
- .light-gray-light
- .light-gray-lighter
- .light-gray-ultralight
- .light-gray-superlight
Brand colors
- .ochre-dark
#a4852f
- .ochre
#dec55b
- .green-dark
#708b55
- .green
#9dd354
- .pink-dark
#b586a4
- .pink
#f2b1dc
- .blue-dark
#7e8dab
- .blue
#8aa3b9
Validation colors
- .v-alert
#821307
- .v-success
#708b55
Link color
- .link-color
#916a84
Text color *
- .text-color
#3a3a3a
To add background-color to elements class="blue-dark"
to text add "-color" to class class="blue-dark-color"
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
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.
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
- Ordered list
- Ordered list
- Nested unordered list unstyled
- Nested unordered list unstyled
- Nested unordered list unstyled
- Ordered list
- 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-striped
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 | |
-13 Max |
6 | 96 | |
-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
Button active
Button disabled
Button sizes
Dropdowns
Dropdown multilevel
Filter button
Filter button small
Navigation
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.
Offcanvas header
List group
Forms
Remember, all inputs must have a type
attribute and class form-control
Badge
Badge small
Badge large
Icons
- Font Awesome Pro, scalable vector icons.
- See the complete set of Font Awesome Pro icons.
- First hand use the regular icons
<i class="far fa-users"></i>
- More examples of how to use see examples.
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-white 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
Well
A well is a content container.
Well primary
Look, Im in a well, with a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Well secondary
Look, Im in a well, with a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Well white
Look, Im in a well, with a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Well warning
Look, Im in a well, with a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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.
Card
Some quick lorem ipsum example text to build on the card title and make up the bulk of the cards content.
Card
Some quick lorem ipsum example text to build on the card title and make up the bulk of the cards content.
Card
Some quick lorem ipsum example text to build on the card title and make up the bulk of the cards content.
Components
Toast message
Read more about toast
Popovers
Read more about popovers
Collapse
Read more about collapse
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 HASH with the desired version of Sweco digital platforms, latest version 5.0.29 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 http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="cleartype" content="on" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Sweco - Application name</title>
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="Sweco" />
<meta name="msapplication-TileColor" content="#3a3a3a" />
<meta name="theme-color" content="#3a3a3a" />
<meta name="description" content="Sweco" />
<meta name="copyright" content="true" />
<!-- SOCIAL MEDIA META START -->
<meta property="og:title" content="Sweco" />
<meta property="og:description" content="Sweco creates shareholder value by conducting growing and profitable operations in areas of vital importance to society in both mature and emerging markets." />
<meta property="og:image" content="https://cdn.swecogroup.com/sweco-digital-platforms/VERSION/manifest/socialmedia-logotype.png" />
<meta property="og:url" content="https://www.sweco.se/en/" />
<meta name="twitter:title" content="Sweco" />
<meta name="twitter:description" content="Sweco creates shareholder value by conducting growing and profitable operations in areas of vital importance to society in both mature and emerging markets." />
<meta name="twitter:image" content="https://cdn.swecogroup.com/sweco-digital-platforms/VERSION/manifest/socialmedia-logotype.png" />
<meta name="twitter:card" content="summary_large_image" />
<!-- SOCIAL MEDIA META STOP -->
<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" />
<link rel="mask-icon" href="https://cdn.swecogroup.com/sweco-digital-platforms/VERSION/manifest/safari-pinned-tab.svg" color="#3a3a3a" />
<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.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>
Download
Skip the download use the Sweco CDN to deliver cached version of Sweco's digital platforms resources to your project.
Replace VERSION and HASH with the desired version of Sweco digital platforms, latest version 5.0.29 is to recommend, see changelog and release notes.
JavaScript
<script src="https://cdn.swecogroup.com/sweco-digital-platforms/5.0.29/js/sweco-bootstrap.js" integrity="HASH" crossorigin="anonymous"></script>
<script src="https://cdn.swecogroup.com/sweco-digital-platforms/5.0.29/js/sweco-components.js" integrity="HASH" crossorigin="anonymous"></script>
CSS
<link rel="stylesheet" href="https://cdn.swecogroup.com/sweco-digital-platforms/5.0.29/css/sweco-bootstrap.css" />
Fonts
<link rel="stylesheet" href="https://cdn.swecogroup.com/sweco-digital-platforms/5.0.29/fonts/fonts.css" />
Icons
Font Awesome Pro.
<link rel="stylesheet" href="https://cdn.swecogroup.com/sweco-digital-platforms/5.0.29/icons/css/all.css" />
Manifest icons
Favicons and app icons to include in your project head.
<link rel="shortcut icon" href="https://cdn.swecogroup.com/sweco-digital-platforms/5.0.29/manifest/favicon.ico" />
<link rel="icon" type="image/png" sizes="16x16" href="https://cdn.swecogroup.com/sweco-digital-platforms/5.0.29/manifest/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="https://cdn.swecogroup.com/sweco-digital-platforms/5.0.29/manifest/favicon-32x32.png" />
<link rel="apple-touch-icon" href="https://cdn.swecogroup.com/sweco-digital-platforms/5.0.29/manifest/apple-touch-icon.png" />
<link rel="mask-icon" href="https://cdn.swecogroup.com/sweco-digital-platforms/5.0.29/manifest/safari-pinned-tab.svg" color="#3a3a3a" />
<meta name="msapplication-config" content="https://cdn.swecogroup.com/sweco-digital-platforms/5.0.29/manifest/browserconfig.xml" />
<link rel="manifest" href="https://cdn.swecogroup.com/sweco-digital-platforms/5.0.29/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
- jQuery (For all Bootstrap components)
- Popper.js (For dropdowns, popovers and tooltips)
- Bootstrap 4
Included in /js/sweco-components.js
- ProgressBar JS (For component progressbar)
- Moment with locales (For component datetimepicker)
- Datetimepicker (For component datetimepicker)
- Typeahead.js (For component typeahead)
Changelog
Version and release notes.
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
<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
<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
<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
<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
<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
<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
- Have a bug or a feature request? Please first read the existing issues and search for existing and closed issues.
- If your problem or idea is not addressed yet, please open a new issue.