Our colour system consists of four palettes, each with a specific role. They work together to create visual impact,
reinforce the Swisscom brand, clearly signpost interactions and enrich content. Our colours have been chosen to work
well on screen and support accessibility.
Primary colours
Swisscom Navy
Swisscom Blue
Swisscom Red
White
Support colours
Dark Grey
Grey Tint 2
Grey Tint 3
Grey Tint 4
Grey Tint 5
Grey Tint 6
Grey Tint 7
Grey Tint 8
Blue
Blue Tint 2
Blue Tint 3
Aluminium
Aluminium Tint 2
Horizon
Horizon Tint 2
Interaction colours
Interaction Blue
Blue Rollover
Interaction Grey
Grey Rollover
Interaction Green
Green Rollover
Interaction Red
Red Rollover
Interaction Orange
Orange Rollover
Accent colours
Turquoise
Turquoise Rollover
Azure
Azure Rollover
Iris
Iris Rollover
Orchid
Orchid Rollover
Pink
Pink Rollover
```section_design
```
Colour palette
The Swisscom colour palette consists of primary, support, interactive and accent colours:
White has priority over all other colours. In addition to white, navy, blue and red are our primary colours. The primary colours characterize the entire brand appearance.
The support colours are restrained and unobtrusive. They are used primarily for structuring the design and for typography.
Interaction colours are restrained to maintain a consistent treatment for interactive elements. They help to differentiate between static and interactive content in page, without relying on hover states.
The accent colours are intended for information graphics and for setting small highlights.
The Swisscom colour palette for Adobe CC can be downloaded here.
Primary colours
The use of primary colours within SDX helps to reinforce the presence of the Swisscom master brand throughout all
Swisscom digital experiences.
Support colours are the most widely used across all screens and components and used as the foundation on which
all our products are made from.
Dark grey is used for the majority of non-interactive typography. Mid and light grey can be used for creating
levels of hierarchy between similar size piece of text.
SDX has seperate interaction and accent colour palettes that feature AA accessible alternative colours to
Swisscom blue and red for use in digital products.
Interaction colours are designed to maintain a consistent treatment for interactive elements. They help to
differentiate between static and interactive content in page, without relying on hover states. This means
both touch and mouse users are able to intuitively navigate content and services.
Accent colours are used as accents to help enrich content and experiences while serving a functional purpose.
They help to create visual links between content and can act as signifiers of content themes throughout
services.
They’re most commonly used within cards and when displaying data in graphs and charts.
Standard variants of the content colours should always be used first.
Only use the dark variants specifically as a pair with the standard colour, or when all standard colours are
already in use in the same visual. For interactive elements where the standard variants of content colours are
used, the dark variants can be used as rollovers.
Pie charts using accent colours
Cards using accent colours
Colour Tints
Tints of accent colours are available for use within extremely complete data sets, but should not be used in any
other context.
Using full bleed colour
Full bleed colour can be used in a number of instances, either to complement content or to add emphasis to an
element within a page.
Full bleed colour should be used sparingly and a conscious effort should be made to maintain the proportionate
usage of colour outlined in the colour ratio diagram at the top of this page.
When pairing content colours full bleed with badges, the dark variant should be used for the background, and
the standard variant used for the badge. This helps to give badges more prominence, and prevents the background
colour from dominating.
Combining accent colours
Accent colours can be used on their own or in combination with other accent colours, but should not be combined
with colours from the other palettes.
Azure is the same colour like Swisscom interaction blue. While Azure can be used as an Accent on page content
be aware that it can interfere with interaction elements.
Text should always be white, and buttons should revert to the ‘on dark’ variant of the secondary button and
avoid using the interaction colours for buttons on colour.
Interaction colours in buttons
Interaction colours in alerts
Wayfinding with colour
They help to create visual links between content and can act as signifiers of content themes throughout
services.
```section_develop
```
All colours can be applied to text, icons, or backgrounds using the corresponding CSS class.
A prefix
bg-
is required to set a background colour.
Our brand font Thesis has an appealing modern appearance and excellent readability. The independent Swisscom typography is an important design element of the brand identity.
The following instructions shows which font size, leading and weight that can be used. By limiting the number of styles the products remain clean and simple.
H1: Discover your personal universe
H2: Discover your personal universe
H3: Discover your personal universe
H4: Discover your personal universe
H5: Discover your personal universe
H6: Discover your personal universe
H1: Discover your personal universe
Immerse yourself in new genres. Crime stories, SciFi or romance? Films, series, documentaries or eSports? Swisscom TV gives you everything your heart desires on screen. Total convenience: it's easy to set up access to your favourite genres on the home screen.
H2: Discover your personal universe
Immerse yourself in new genres. Crime stories, SciFi or romance? Films, series, documentaries or eSports? Swisscom TV gives you everything your heart desires on screen. Total convenience: it's easy to set up access to your favourite genres on the home screen.
H3: Discover your personal universe
Immerse yourself in new genres. Crime stories, SciFi or romance? Films, series, documentaries or eSports? Swisscom TV gives you everything your heart desires on screen. Total convenience: it's easy to set up access to your favourite genres on the home screen.
H4: Discover your personal universe
Immerse yourself in new genres. Crime stories, SciFi or romance? Films, series, documentaries or eSports? Swisscom TV gives you everything your heart desires on screen. Total convenience: it's easy to set up access to your favourite genres on the home screen.
H5: Discover your personal universe
Immerse yourself in new genres. Crime stories, SciFi or romance? Films, series, documentaries or eSports? Swisscom TV gives you everything your heart desires on screen. Total convenience: it's easy to set up access to your favourite genres on the home screen.
H6: Discover your personal universe
Immerse yourself in new genres. Crime stories, SciFi or romance? Films, series, documentaries or eSports? Swisscom TV gives you everything your heart desires on screen. Total convenience: it's easy to set up access to your favourite genres on the home screen.
Font Weights
Font weight characteristics
```section_design
```
Rules
Typefaces
When designing for SDX, there are two typefaces to choose from – TheSans and TheSerif – each available in semi-light and semi-bold.
The Sans is our primary typeface and is used across all applications. The Serif is Swisscom’s voice and is only used for quotations.
The Sans
The Serif
Using colour and typography
When using colour backgrounds, only white must be used as font colour.
The colour matrix demonstrates the accessibility of typefaces across the entire colour palette, at all specified sizes.
Colour and typography
Type hierarchy and colour
When creating layouts using typography, only the following colours should be used to give content hierarchy. All other colours should never be used for typography.
Type hierarchy colour guidance on light
Type format example
Types sizes for body text
The default body font size is 18px. Depending on the application you can choose a font-size of 16px. The following classes are defined for this purpose text-standard and text-small.
Standard body text
Immerse yourself in new genres. Crime stories, SciFi or romance? Films, series, documentaries or eSports? Swisscom TV gives you everything your heart desires on screen. Total convenience: it's easy to set up access to your favourite genres on the home screen.
Smaller body text
Immerse yourself in new genres. Crime stories, SciFi or romance? Films, series, documentaries or eSports? Swisscom TV gives you everything your heart desires on screen. Total convenience: it's easy to set up access to your favourite genres on the home screen.
Letter-spacing
We achieve a compact type face by reducing letter spacing. With larger font sizes, a smaller letter is crucial for readability. The letter spacing is usually increased for very small font sizes.
Letter-spacing larger font size
Letter-spacing smaller font size
```section_develop
```
The SDX Library includes the two standard fonts TheSans and TheSerif. It uses its responsiveness to automatically adjust the font-size and properties depending on a series of media queries.
Body font size
The default font size is 18px. This font size will automatically be applied for the text. However, in certain cases where you want to change the default size, the class text-small should be added to the HTML elements directly.
```htmlmixed
My body text size
My body text size
```
Smaller text
For smaller text for example asterisk notes add text-smaller
```htmlmixed
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
```
The SDX Library includes the two standard fonts TheSans and TheSerif. It uses it's responsiveness to automatically adjust the font-size and properties depending on a series of media queries.
Font Type Sans
The default style uses the TheSans font and will automatically be applied to the text. However, in certain cases where TheSans must be explicitly applied then the font--sans class should be added to the HTML elements directly.
```htmlmixed
Headline 4: Swisscom intends to continue reducing roaming prices
Swisscom intends to continue reducing roaming prices
```
Font Type Serif
This font font--serif is only used for quotes.
```htmlmixed
We have to keep customer promises (Quote by Urs Schaeppi)
```
Font Weight
To change the font weight form the default weight Light to a different weight add the classes font--light, font--semi-light or font--semi-bold to the element.
```htmlmixed
Swisscom intends to continue reducing roaming prices
Swisscom intends to continue reducing roaming prices
Swisscom intends to continue reducing roaming prices
```
Headings
All HTML headings, from <h1> to <h6>, should be used to structure the page semantically correct. Make sure to use just a single one <h1 class="text-h1"> on the entire page and do not skip a heading only for design matters. Instead, use classes like class="text-h1" to make your heading look the way you want it.
```htmlmixed
I’m a H1
I’m a H2
I’m a H3
I’m semantically a H4 but I look like a H1
I’m semantically a H5 but I look like a H2
I’m semantically a H6 but I look like a H3
```
Display Headings
Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading, a larger slightly more opinionated heading style.
To add a display heading add one of the following classes text-d1, text-d2 or text-d3 to the element.
```htmlmixed
Display 1: Swisscom intends to continue reducing roaming prices
Display 2: Swisscom intends to continue reducing roaming prices
Display 3: Swisscom intends to continue reducing roaming prices
Different combinations of column widths and arrangements can be used to support the intention of the design. Uniform column widths create calm, functional layouts. Variation between column widths can create visually dynamic and exciting layouts.
Resize your browser to see how the grid responds to different screen sizes
Our baseline dictates the horizontal positioning of typography across all screens within Swisscom services. No matter the screen width, margins or column width, the baseline grid is always set to 8px. This ensures a consistent treatment of type placement and line spacing across all products at all sizes.
Baseline grid
All typography, when using the defined sizes, will naturally align to the baseline grid. Graphic elements should aim to align to the baseline where possible but this isn’t mandatory.
Axis alignment
The concept of the Swisscom axis within SDX is derived from the Swisscom master brand, and the Life Form itself. Use the axis plotted on any grid column to create interesting and asymmetric layouts.
The axis alignment stems from the central axis of the Swisscom Life Form
Axis in application
Vertical aligment in an article
For mobile breakpoints, the left edge of page content aligns to the central axis in the Life Form and is always the outside margin of the underlying grid.
Vertical alignment on smaller screens
```section_develop
```
The SDX library includes a responsive, mobile first 12 column grid system. It includes predefined classes for easy layout options and is based on Bootstrap's Grid component. The grid is using a flexbox based system by default.
```htmlmixed_no_preview
col-xs
col-xs
```
Introduction
Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding. Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be immediate children of rows.
Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Sass mixins can also be used for more semantic layouts.
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three .col-xs-4.
If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.
Sample mobile-to-desktop layout
Using a set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.
```htmlmixed_playground
col-xs-12 col-md-1
col-xs-12 col-md-1
col-xs-12 col-md-1
col-xs-12 col-md-1
col-xs-12 col-md-1
col-xs-12 col-md-1
col-xs-12 col-md-1
col-xs-12 col-md-1
col-xs-12 col-md-1
col-xs-12 col-md-1
col-xs-12 col-md-1
col-xs-12 col-md-1
col-xs-12 col-md-8
col-xs-12 col-md-4
col-xs-12 col-md-4
col-xs-12 col-md-4
col-xs-12 col-md-4
col-xs-12 col-md-6
col-xs-12 col-md-6
```
Equal-width
Utilize breakpoint-specific column classes for equal-width columns. Add any number of .col-{breakpoint}s for each breakpoint you need and every column will be the same width.
For example, here are two grid layouts that apply to every device and viewport, from xs to ul.
```htmlmixed_playground
1 of 2
1 of 2
1 of 3
1 of 3
1 of 3
```
Setting one column width
Auto-layout for columns also means you can set the width of one column and the others will automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.
```htmlmixed_playground
1 of 3
2 of 3 (wider)
3 of 3
1 of 3
2 of 3 (wider)
3 of 3
```
Variable width content
Using the .col-{breakpoint}-auto classes, columns can size themselves based on the natural width of their content. This comes in handy with single line content like inputs, numbers, etc. This, in conjunction with "horizontal alignment" classes, can be used for centering layouts with uneven column sizes as viewport width changes.
```htmlmixed_playground
1 of 3
Variable width content
3 of 3
1 of 3
Variable width content
3 of 3
```
Responsive classes
The SDX grid includes six tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small (xs), small (sm), medium (md), large (lg), extra large (xl) or ultra large (ul) devices however you see fit.
All breakpoints
For grids that are the same from the smallest of devices to the largest, use the .col-xs and .col-xs-* classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to .col-xs.
The grid requires a class for full-width columns. If you have a .col-sm-6 and don’t add .col-xs-12, your xs grid will not render correctly.
```htmlmixed_playground
col-xs
col-xs
col-xs
col-xs
col-xs-8
col-xs-4
```
```htmlmixed_playground
1 of 2 (stacked on mobile)
1 of 2 (stacked on mobile)
```
Alignment
Use flexbox alignment utilities to vertically and horizontally align columns.
Vertical alignment
Align the whole row
```htmlmixed_playground
1 of 3
1 of 3
1 of 3
1 of 3
1 of 3
1 of 3
1 of 3
1 of 3
1 of 3
```
Align individual items
```htmlmixed_playground
1 of 3
1 of 3
1 of 3
```
Horizontal alignment
```htmlmixed_playground
1 of 2
1 of 2
1 of 2
1 of 2
1 of 2
1 of 2
1 of 2
1 of 2
1 of 2
1 of 2
```
No gutters
The gutters between columns in our predefined grid classes can be removed with .no-gutters. This removes the negative margins from .row and the horizontal padding from all immediate children columns.
```htmlmixed_playground
col-xs-12 col-sm-6 col-md-8
col-xs-6 col-md-4
```
Reordering
Flex order
Use flexbox utilities for controlling the visual order of your content.
```htmlmixed_playground
1st, but unordered
2nd, but last
3rd, but first
```
Offsetting columns
Move columns to the right using offset-md-* classes. These classes increase the left margin of a column by * columns. For example, .offset-md-4 moves .col-md-4 over four columns.
```htmlmixed_playground
col-md-4
col-md-4 offset-md-4
col-md-3 offset-md-3
col-md-3 offset-md-3
col-md-6 offset-md-3
```
Push and pull
Easily change the order of our built-in grid columns with .push-md-* and .pull-md-* modifier classes.
```htmlmixed_playground
col-md-9 push-md-3
col-md-3 pull-md-9
```
Grid without margin (mobile only)
Using .full-width--mobile-only on any element will render them in full screen mode for mobile devices and tablet devices (the extra small to small range) only, whereas larger screens render normally.
Dividers help to establish a clear hierarchy. Placing content between dividers helps to create clear groups of related information. Dividers are especially useful in small screen experiences, such as mobile, where there is less opportunity to establish visual hierarchy using type or scale alone.
Light gray divider
Mid gray divider
Dark gray divider
```section_design
```
Variations
Grey dividers
There are three tiers of contrast on light backgrounds for divider lines and also a dark variant. Pick the most appropriate for your designs.
Dark gray divider
White (dark variant)
Rules
Vertical spacing
The vertical spacing between dividers should be 32px.
Vertical spacing
Minimum width
The divider is always 100% of the text width.
Minimum width
```section_develop
```
Dividers group and separate content within lists and page layouts. The divider is a thin rule, lightweight yet sufficient to distinguish content visually and spatially.
SDX dividers default to "full-bleed", eg (full width).
```htmlmixed_accessible
This text is above the divider
This text is below the divider
```
Light background dividers
There are three tiers of contrast on light backgrounds for divider lines, pick the most appropriate for your designs.
```htmlmixed_accessible
Light gray divider
Mid gray divider
Dark gray divider
```
Dark background dividers
There is only one contrast option on darker backgrounds
```htmlmixed_accessible
This text is above the divider
This text is below the divider
```
*/
/*doc
---
title: Text Links
name: 02-components-185-text-links
category: Components - Text Links
---
Introduction
Text links are the simplest interactive element. They help to clearly label interactive elements within text, footers and navigation.
In page text links use the Swisscom interaction blue. This helps to differentiate them from standard body text and headings, without the need to use buttons across all CTAs.
An 18px unvisited link (top) and an 18px clicked/hover state link (bottom)
Dark variants
An 16px unvisited link (top) and an 16px clicked/hover state link (bottom)
Dark variants
Navigation
Navigation text links differ from conventional text links. Their static state is Swisscom Navy. They are positioning and scaled differently from conventional page text links to give them greater page hierarchy.
An 16px unvisited link (top) and an 16px clicked/hover state link (bottom)
Typography
Typography standard 18px
Typography standard 18px dark variant
Typography standard 16px
Typography standard 16px dark variant
Typography navigation
```section_develop
```
In page text links are supported on both the <a> and <button> tag by applying the link class to the element.
Styled lists can be used to help group points together and give them prominence within the page hierarchy. There are two types of lists; structured lists that are numbered and unstructured lists that use bullet points.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit atedur.
Lorem ipsum dolor sit amet.
```section_design
```
Variations
Ordered list
Single line list
Multi-line list
Unordered list
Single line list
Multi-line list
Rules
Alignment
Numbers: Should be aligned to the baseline of the text and are right-aligned to the text.
Bullets: They are aligned to the vertical centre point of the text.
Ordered list alignment
Unordered list alignment
Vertical spacing between paragraphs or text and lists is set to 40px, and is measured from descender to ascender.
Space between elements
Insertion
Insertion spacing is 8px between text and the list element.
Insertion spacing
Typography
Typography ordered list
Typography unordered list
```section_develop
```
Bullet list
Bullet list single line
```htmlmixed_playground_accessible
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit atedur, labore aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit atedur, labore aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
```
Bullet list multi line
```htmlmixed_playground_accessible
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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 nisi ut aliquip ex ea commodo consequat.
Ut enim ad minim veniam, quis nostrud exercitation ullamco.
Ut enim ad minim veniam, quis nostrud exercitation ullamco.
Ut enim ad minim veniam, quis nostrud exercitation ullamco.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
```
Link list
When you display more than one link it is shown as a link list. The link list has a chevron to the right before each link element.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit atedur, labore aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit atedur, labore aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit atedur, labore aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit atedur, labore aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit atedur, labore aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit atedur, labore aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
```
Numbered list multi line
```htmlmixed_playground_accessible
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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 nisi ut aliquip ex ea commodo consequat.
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 nisi ut aliquip ex ea commodo consequat.
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 nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Hide an element to all devices except screen readers with .sr-only.
Combine .sr-only with .sr-only-focusable to show the element again when it’s focused (e.g. by a keyboard-only user).
```css_no_preview
// Usage as a mixin
.skip-navigation {
@include sr-only;
@include sr-only-focusable;
}
```
*/
/*doc
---
title: Text
name: 04-developers-06-text
category: Developers - Text utils
---
Text alignment
Easily realign text to components with text alignment classes.
```htmlmixed_playground
Left aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
Right aligned text on all viewport sizes.
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.
```
Text transformation
Transform text in components with text capitalization classes.
Note how text-capitalize only changes the first letter of each word, leaving the case of any other letters unaffected.
```htmlmixed_playground
Lowercased text.
Uppercased text.
capiTaliZed text.
```
Text truncate
Trunctate texts using the CSS class .text-truncate (which adds an ellipsis).
```htmlmixed_playground
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.
```
In cases where the CSS class .text-truncate does not work (because of ::before), the Web Component <sdx-text-truncate /> can be used.
```htmlmixed_playground
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.
```
Maximum text width
To make long text paragraphs easier to read, SDX recommends to limit their width to a maximum of 700px. This helper class makes it easy to ensure that the text will wrap and never exceed this limit.
```htmlmixed_playground
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.
The .invisible and .visible class can be used to toggle only the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document.
```htmlmixed
not visible
visible
```
Responsive visibility
For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query.
The .hidden-*-up classes hide the element when the viewport is at the given breakpoint or wider. For example, .hidden-md-up hides an element on medium, large, and extra-large viewports.
The .hidden-*-down classes hide the element when the viewport is at the given breakpoint or smaller. For example, .hidden-md-down hides an element on extra-small, small, and medium viewports.
You can combine one .hidden-*-up class with one .hidden-*-down class to show an element only on a given interval of screen sizes. For example, .hidden-sm-down.hidden-xl-up shows the element only on medium and large viewports. Using multiple .hidden-*-up classes or multiple .hidden-*-down classes is redundant and pointless.
If you want to go for specific devices (phone, tablet or desktop) use the device specific classes instead of the breakpoint specific classes:
Phone: .hidden-phone-up or .hidden-phone-down
Tablet: .hidden-tablet-up or .hidden-tablet-down
Desktop: .hidden-desktop-up or .hidden-desktop-down