SURF Design System

Uses normalize 8.0.1
One combined css-file sds.css
CSS variables (for colors and spacing)
All pixel-based values are applied as rem or em
No specific focus styling, use browser default
Mobile design to be determined
Interaction (javascript) to be determined
Transitions to be determined

Additional

Language-switcher

Palette's support color applies here.

Demo

Code

HTML

<nav class="sds--language-switcher sds--text--body--small" aria-label="Language"> <ul> <li> <a href="#" hreflang="nl" class="is-active"> NL<span class="sds--visually-hidden"> (Nederlands)</span> </a> <span class="sds--language-sds--divider">|</span> </li> <li> <a href="#" hreflang="en"> EN<span class="sds--visually-hidden"> (English)</span> </a> </li> </ul> </nav>

SCSS

.sds--language-switcher { // Prepare for when link color needs to be changed. --lnk--base-color: var(--sds--palette--support-color--400); ul { @include align-icon-defaults(em(9px, 14), center); li { @include align-icon-defaults(em(9px, 14), center); flex-shrink: 0; } a { &:link, &:visited { @include lnk-decoration(show); &:not(.is-active) { font-weight: 600; @include lnk-color(var(--lnk--base-color)); } &.is-active { @include lnk-color(); } } } } }

Metadata-list

Palette's support color applies here.

Demo

Publication date: 3 april 2022
Expires: Never
Url: Hyperlink
Experience: 2 ratings

Code

HTML

<dl class="sds--metadata-list"> <div class="sds--metadata-list--item"> <dt>Publication date</dt> <dd>3 april 2022</dd> </div> <div class="sds--metadata-list--item"> <dt>Expires</dt> <dd>Never</dd> </div> <div class="sds--metadata-list--item"> <dt>Url</dt> <dd><a href="#">Hyperlink</a></dd> </div> <div class="sds--metadata-list--item"> <dt>Experience</dt> <dd>2 ratings</dd> </div> </dl>

SCSS

.sds--metadata-list { // Set variable to be able to nest "&" inside "&". $self: &; display: flex; flex-wrap: wrap; gap: var(--sds--space--2); dt { font-weight: 600; } dd { margin: 0; } a { font-weight: 600; &:link, &:visited { @include lnk-decoration(show); @include lnk-color(var(--sds--palette--support-color--400)); } } &--item { &:not(:last-child) { border-right: rem(1px) solid var(--sds--color--gray--300); padding-right: var(--sds--space--2); } } }

Table-basic

Palette's main color applies here.

Demo

Juli 2022 (gemeten tot vandaag)	146 van 200
Juni 2022	146 van 200
Mei 2022	146 van 200

Code

HTML

<div class="sds--table-basic sds--text--body--small"> <table> <tbody> <tr> <td>Juli 2022 (gemeten tot vandaag)</td> <td>146 van 200</td> </tr> <tr> <td>Juni 2022</td> <td>146 van 200</td> </tr> <tr> <td>Mei 2022</td> <td>146 van 200</td> </tr> </tbody> </table> </div>

SCSS

.sds--table-basic { table { width: 100%; border-collapse: collapse; border-spacing: 0; background-color: var(--sds--color--gray--100); td { padding: var(--sds--space--1) var(--sds--space--2); } tr { + tr { border-top: rem(1px) solid var(--sds--color--white); } } } }

User-info

Palette's main color applies here.

Demo

Code

HTML

<nav class="sds--user-info is-open"> <div class="sds--user-info--textual"> <p class="name">Username</p> <p class="role sds--text--body--small">Role or Organization</p> </div> <button type="button" class="sds--user-info--button"> <?php sizeable_svg("functional-icons/arrow-down-2", 11.25/16 . "em", 5.47/16 . "em"); ?> </button> <div class="sds--user-info--dropdown"> <ul> <li> <a href="#">Mijn contacthistorie</a> </li> <li> <a href="#">Mijn gegevens</a> </li> </ul> <ul> </li> <li> <a href="#">Uitloggen</a> </li> </ul> </div> </nav> <nav class="sds--user-info"> <div class="sds--user-info--textual"> <p class="name">Username</p> <p class="role sds--text--body--small">Role or Organization</p> </div> <button type="button" class="sds--user-info--button"> <?php sizeable_svg("functional-icons/arrow-down-2", 11.25/16 . "em", 5.47/16 . "em"); ?> </button> <div class="sds--user-info--dropdown"> <ul> <li> <a href="#">Mijn contacthistorie</a> </li> <li> <a href="#">Mijn gegevens</a> </li> </ul> <ul> </li> <li> <a href="#">Uitloggen</a> </li> </ul> </div> </nav>

SCSS

.sds--user-info { // Set variable to be able to nest "&" inside "&". $self: &; @include align-icon-defaults(var(--sds--space--1), center); // To position dropdown. position: relative; &:not(.is-open) { #{$self}--dropdown { display: none; } } &.is-open { #{$self}--button { svg { transform: rotate(180deg); } } } &--textual { text-align: right; .name { font-weight: 600; line-height: calc(22 / 16); } .role { color: var(--sds--palette--main-color--400); } } &--button { flex-shrink: 0; @include align-icon-defaults(1em, center); justify-content: center; background-color: var(--sds--palette--main-color--400); color: var(--sds--color--white); width: rem(32px); height: rem(32px); border-radius: 50%; svg { [stroke-width] { stroke-width: rem(3px); } } } &--dropdown { position: absolute; right: 0; top: 100%; width: rem(190px); background-color: var(--sds--color--white); border-radius: 0 0 rem(6px) rem(6px); box-shadow: 0 rem(4px) rem(4px) 0 var(--sds--color--pitch-black--dimmed--25); > ul { > li { > a { display: block; padding: var(--sds--space--2) var(--sds--space--3); font-weight: 600; @include lnk-decoration(off); &:hover { background-color: var(--sds--color--gray--500); color: var(--sds--color--white); } } } + ul { border-top: rem(1px) solid var(--sds--color--gray--200); } } } }

Components

Accordion

Palette's support color applies here.

Demo

Here goes the text that holds the content for this section of the accordion

Code

HTML

<div class="sds--accordion sds--text--body--large"> <div class="sds--accordion--item"> <button class="sds--accordion--trigger sds--btn-reset"> <span class="icon"> <?php sizeable_svg("functional-icons/arrow-down-2", 12/18 . "em", 5.6/18 . "em"); ?> </span> <span class="text">Test 7-10-2022 FAQ TOP wordt niet gevonden via zoekopdracht</span> </button> <div class="sds--accordion--content"> <p>Here goes the text that holds the content for this section of the accordion</p> </div> </div> <div class="sds--accordion--item"> <button class="sds--accordion--trigger sds--btn-reset"> <span class="icon"> <?php sizeable_svg("functional-icons/arrow-down-2", 12/18 . "em", 5.6/18 . "em"); ?> </span> <span class="text">Etiam ut purus mattis mauris renean posuere tortor sed cursus sodales aliquam suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc aenean posuere tortor sed cursus</span> </button> <div class="sds--accordion--content"> <p>Here goes the text that holds the content for this section of the accordion</p> </div> </div> <div class="sds--accordion--item is-open"> <button class="sds--accordion--trigger sds--btn-reset"> <span class="icon"> <?php sizeable_svg("functional-icons/arrow-down-2", 12/18 . "em", 5.6/18 . "em"); ?> </span> <span class="text">Test 7-10-2022 FAQ TOP wordt niet gevonden via zoekopdracht</span> </button> <div class="sds--accordion--content"> <p>Here goes the text that holds the content for this section of the accordion</p> </div> </div> </div>

SCSS

.sds--accordion { // Set variable to be able to nest "&" inside "&". $self: &; border-top: rem(3px) solid var(--sds--color--gray--300); &--item { border-bottom: rem(1px) solid var(--sds--color--gray--300); &:not(.is-open) { #{$self}--content { display: none; } } &.is-open { #{$self}--trigger { .icon { transform: rotate(180deg); } } } } &--trigger { @include align-icon-defaults(em(20px, 18)); width: 100%; padding: var(--sds--space--1-and-a-half); .icon { color: var(--sds--palette--support-color--400); svg { [stroke-width] { stroke-width: rem(3px); } } } } &--content { // Simulate the space before the textual part of the trigger. // Space before icon, icon itself and space after. padding-left: calc(var(--sds--space--1-and-a-half) + #{em(12px, 18)} + #{em(20px, 18)}); padding-right: var(--sds--space--1-and-a-half); padding-bottom: var(--sds--space--1-and-a-half); } }

Alert

Note that .sds--page-container is applied twice on this demo page, which is not desirable, but just convenient. For the alert component we normally assume to have full page-width so .sds--page-container, is needed inside. For the demo page it's convenient to have .sds--page-container on a high level, so for this demo page we breakout the alert.

Note that the alert doesn't always need a .sds--page-container inside. If it's placed inside an element that doesn't have full page-width, for example inside the modal component.

Note that applying icon-color is done by applying .bg to an element inside the svg. The lines are always white (no extra class needed).

Demo

Anatomy

It’s recommended to add at least one other administrator besides yourself.

Variants

Default

Success

Warning

Error

Info

Code

HTML

<h5>Anatomy</h5> <div class="sds--alert sds--alert--status-default"> <div class="sds--page-container"> <div class="sds--alert--inner"> <div class="sds--alert--visual"> <?php sizeable_svg("functional-icons/info", 22.5/16 . "em", 22.5/16 . "em"); ?> </div> <div class="sds--alert--textual"> <p>It’s recommended to add at least one other administrator besides yourself.</p> <button type="button" class="sds--btn sds--btn--ghost--light sds--btn--small">Add administrator</button> </div> <button class="sds--alert--actions"> <span class="text sds--visually-hidden">Close alert</span> <?php sizeable_svg("functional-icons/close", 12/16 . "em", 12/16 . "em"); ?> </button> </div> </div> </div> <div class="sds--alert sds--alert--status-success"> <div class="sds--page-container"> <div class="sds--alert--inner"> <div class="sds--alert--visual"> <?php sizeable_svg("functional-icons/success", 22.5/16 . "em", 22.5/16 . "em"); ?> </div> <div class="sds--alert--textual"> <p>It’s recommended to add at least one other administrator besides yourself.</p> <button type="button" class="sds--btn sds--btn--ghost--dark sds--btn--small">Add administrator</button> </div> </div> </div> </div> <h5>Variants</h5> <div class="sds--alert sds--alert--status-default"> <div class="sds--page-container"> <div class="sds--alert--inner"> <div class="sds--alert--visual"> <?php sizeable_svg("functional-icons/info", 22.5/16 . "em", 22.5/16 . "em"); ?> </div> <div class="sds--alert--textual"> <p>Default</p> </div> </div> </div> </div> <div class="sds--alert sds--alert--status-success"> <div class="sds--page-container"> <div class="sds--alert--inner"> <div class="sds--alert--visual"> <?php sizeable_svg("functional-icons/success", 22.5/16 . "em", 22.5/16 . "em"); ?> </div> <div class="sds--alert--textual"> <p>Success</p> </div> </div> </div> </div> <div class="sds--alert sds--alert--status-warning"> <div class="sds--page-container"> <div class="sds--alert--inner"> <div class="sds--alert--visual"> <?php sizeable_svg("functional-icons/alert-triangle", 22.5/16 . "em", 22.5/16 . "em"); ?> </div> <div class="sds--alert--textual"> <p>Warning</p> </div> </div> </div> </div> <div class="sds--alert sds--alert--status-error"> <div class="sds--page-container"> <div class="sds--alert--inner"> <div class="sds--alert--visual"> <?php sizeable_svg("functional-icons/alert-triangle", 22.5/16 . "em", 22.5/16 . "em"); ?> </div> <div class="sds--alert--textual"> <p>Error</p> </div> </div> </div> </div> <div class="sds--alert sds--alert--status-info"> <div class="sds--page-container"> <div class="sds--alert--inner"> <div class="sds--alert--visual"> <?php sizeable_svg("functional-icons/info", 22.5/16 . "em", 22.5/16 . "em"); ?> </div> <div class="sds--alert--textual"> <p>Info</p> </div> </div> </div> </div>

SCSS

.sds--alert { // Set variable to be able to nest "&" inside "&". $self: &; .sds--page-container { #{$self}--inner { min-height: rem(60px); gap: var(--sds--space--3); padding-left: unset; padding-right: unset; } } &--inner { padding: var(--sds--space--1) var(--sds--space--2); display: flex; align-items: center; gap: var(--sds--space--1-and-a-half); } &--visual { flex-shrink: 0; display: flex; svg { color: var(--sds--color--white); } } &--textual { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sds--space--1-and-a-half) var(--sds--space--3); p { font-weight: 600; } } &--actions { margin-left: auto; } // Apply status colors. // See "$status-colors" for defined status-colors. @each $status, $settings in $status-colors { &--status-#{$status} { background-color: map-get($settings, bg); color: map-get($settings, color); svg { .bg { fill: map-get($settings, icon-bg); } } } } }

Back-to-top

Palette's support color applies here.

The outer element doesn't have to be a button. Please choose a semantical correct element for your usecase.

Demo

Code

HTML

SCSS

.sds--back-to-top { @include align-icon-defaults($alignment: center); justify-content: center; background-color: var(--sds--palette--support-color--400); color: var(--sds--color--white); width: rem(24px); height: rem(24px); border-radius: 50%; border: rem(1px) solid var(--sds--color--white); &:hover { background-color: var(--sds--palette--support-color--500); } svg { [stroke-width] { stroke-width: rem(6px); } } }

Backdrop

See modal for an example with real content.

Demo

Content

Code

HTML

<div class="demo-bg"> <div class="sds--backdrop"> <p>Content</p> </div> </div>

SCSS

.sds--backdrop { background-color: var(--sds--color--pitch-black--dimmed--15); }

Background-blur

Demo

Content

Code

HTML

<div class="demo-bg"> <div class="sds--background-blur"> <p>Content</p> </div> </div>

SCSS

.sds--background-blur { background-color: var(--sds--color--white--dimmed--70); box-shadow: 0 0 4px 4px var(--sds--color--white--dimmed--70); }

Badge-number

The outer element doesn't have to be a span. Please choose a semantical correct element for your usecase.

Demo

99+ 23 99+

Code

HTML

SCSS

.sds--badge--number { @include align-icon-defaults($alignment: center); justify-content: center; min-width: rem(26px); height: rem(26px); padding: 0 rem(4px); border-radius: rem(13px); border: rem(1px) solid var(--sds--color--white); background-color: var(--sds--color--black); color: var(--sds--color--white); font-family: $font-nunito; font-weight: 800; font-size: rem(10px); line-height: 1; &--colored { background-color: var(--sds--palette--main-color--400); } &--small { min-width: rem(18px); height: rem(18px); border-radius: rem(9px); font-size: rem(8px); } }

Badge

The outer element doesn't have to be a button. Please choose a semantical correct element for your usecase.

Demo

Code

HTML

<button class="sds--badge"> <span class="sds--badge--visual"> <?php sizeable_svg("functional-icons/allowance-no-talking", 16.67/16 . "em", 16.67/16 . "em"); ?> </span> <span class="sds--badge--textual sds--text--body--small">badge text</span> </button>

SCSS

.sds--badge { background-color: var(--sds--color--white); padding: 0 var(--sds--space--1-and-a-half); @include align-icon-defaults(em(8px), center); border-radius: rem(18px); border: rem(1px) solid var(--sds--color--gray--400); &--visual { display: flex; } &--textual { padding: var(--sds--space--1) 0; font-weight: 600; } }

Block-switch

The outer element doesn't have to be a button and the heading element doesn't have to be a h3. Please choose a semantical correct elements for your usecase.

Palette's support color applies here.

Demo

Public team

List team in public teams index. Others can request membership.

Vertical

Code

HTML

<div class="demo-row"> <button class="sds--block-switch is-active"> <span class="sds--block-switch--title"> <span class="icon"><?php sizeable_svg("illustrative-icons/hr", 32/16 . "em", 32/16 . "em"); ?></span> <span class="text sds--text--h3">Public team</span> </span> <span class="sds--text--body--small">List team in public teams index. Others can request membership.</span> </button> <a class="sds--block-switch" href="#"> <p class="sds--block-switch--title"> <span class="icon"><?php sizeable_svg("illustrative-icons/hr", 32/16 . "em", 32/16 . "em"); ?></span> <span class="text sds--text--h3">Public team</span> </p> <p class="sds--text--body--small">List team in public teams index. Others can request membership.</p> </a> </div> <h5>Vertical</h5> <div class="demo-row"> <button class="sds--block-switch sds--block-switch--vertical is-active"> <span class="sds--block-switch--visual"> <span class="icon"><?php sizeable_svg("illustrative-icons/hr", 32/16 . "em", 32/16 . "em"); ?></span> </span> <span class="sds--block-switch--textual"> <span class="sds--block-switch--title sds--text--h3">Public team</span> <span class="sds--text--body--small">List team in public teams index. Others can request membership.</span> </span> </button> <button class="sds--block-switch sds--block-switch--vertical"> <span class="sds--block-switch--visual"> <span class="icon"><?php sizeable_svg("illustrative-icons/hr", 32/16 . "em", 32/16 . "em"); ?></span> </span> <span class="sds--block-switch--textual"> <span class="sds--block-switch--title sds--text--h3">Public team</span> <span class="sds--text--body--small">List team in public teams index. Others can request membership.</span> </span> </button> </div>

SCSS

.sds--block-switch { // Set variable to be able to nest "&" inside "&". $self: &; display: flex; flex-direction: column; gap: var(--sds--space--1); padding: var(--sds--space--3); border-radius: rem(8px); border: rem(1px) solid var(--sds--color--gray--400); &:link, &:visited { text-decoration: none; } .icon { // Take correct own height. display: inline-flex; } &--title { @include align-icon-defaults(em(16px, 24), center); } &.is-active { border-color: var(--sds--palette--support-color--400); border-width: rem(3px); padding: calc(var(--sds--space--3) - #{rem(2px)}); #{$self}--visual { color: var(--sds--palette--support-color--400); } #{$self}--title { color: var(--sds--palette--support-color--400); } } &--vertical { // Override for vertical layout. @include align-icon-defaults(em(16px, 16), center); flex-direction: row; #{$self}--visual { flex: 0 0 auto; } #{$self}--textual { span { display: block; } } } }

Button

Palette's support color applies here.

Buttons can be aligned by a parent element with the class .sds--actions--outer.

Demo

Anatomy

Variants

Anchor as primary button

Formats

Code

HTML

<h5>Anatomy</h5> <div class="sds--actions--outer"> <button type="button" class="sds--btn sds--btn--primary"> <?php sizeable_svg("functional-icons/arrow-down-2", 11.25/16 . "em", 5.47/16 . "em"); ?> <span class="textual">Default</span> </button> </div> <h5>Variants</h5> <div class="sds--actions--outer"> <button type="button" class="sds--btn sds--btn--primary">Primary button</button> <a href="#" class="sds--btn sds--btn--primary">Anchor as primary button</a> <button type="button" class="sds--btn sds--btn--primary" disabled>Primary button disabled</button> <button type="button" class="sds--btn sds--btn--secondary">Secondary button</button> <button type="button" class="sds--btn sds--btn--secondary" disabled>Secondary button disabled</button> <button type="button" class="sds--btn sds--btn--tertiary">Tertiary button</button> <button type="button" class="sds--btn sds--btn--tertiary" disabled>Tertiary button disabled</button> </div> <div class="sds--actions--outer"> <button type="button" class="sds--btn sds--btn-destructive--primary">Destructive primary button</button> <button type="button" class="sds--btn sds--btn-destructive--primary" disabled>Destructive primary button disabled</button> <button type="button" class="sds--btn sds--btn-destructive--secondary">Destructive secondary button</button> <button type="button" class="sds--btn sds--btn-destructive--secondary" disabled>Destructive secondary button disabled</button> <button type="button" class="sds--btn sds--btn-destructive--tertiary">Destructive tertiary button</button> <button type="button" class="sds--btn sds--btn-destructive--tertiary" disabled>Destructive tertiary button disabled</button> </div> <div class="sds--actions--outer"> <button type="button" class="sds--btn sds--btn--ghost--dark">Ghost Dark button</button> <div class="demo-bg"> <button type="button" class="sds--btn sds--btn--ghost--light">Ghost Light button</button> </div> </div> <h5>Formats</h5> <div class="sds--actions--outer"> <button type="button" class="sds--btn sds--btn--primary">Default</button> <button type="button" class="sds--btn sds--btn--primary sds--btn--small">Small</button> <button type="button" class="sds--btn sds--btn--primary sds--btn--full">Full</button> </div>

SCSS

button { @include btn-reset(); text-align: left; font-weight: inherit; color: currentColor; // Take correct own height. display: inline-flex; .icon { // Take correct own height. display: inline-flex; } } .sds--btn { font-weight: 600; padding: var(--sds--space--1-and-a-half) var(--sds--space--3); min-height: rem(48px); border-radius: rem(6px); border: rem(1px) solid transparent; @include align-icon-defaults(1em, center); flex-wrap: wrap; justify-content: center; &:link, &:visited { text-decoration: none; } &--small { padding: var(--sds--space--1) var(--sds--space--3); min-height: rem(40px); } &--full { flex: 1 1 auto; } &--primary { background-color: var(--sds--palette--support-color--400); &, &:link, &:visited { color: var(--sds--color--white); } &:hover { background-color: var(--sds--palette--support-color--500); } &:active { background-color: var(--sds--palette--support-color--100); color: var(--sds--palette--support-color--500); } &:disabled { background-color: var(--sds--color--gray--100); color: var(--sds--color--gray--300); } } &--secondary { border-color: var(--sds--color--gray--400); &, &:link, &:visited { color: var(--sds--color--gray--500); } &:hover { border-color: var(--sds--palette--support-color--500); background-color: var(--sds--palette--support-color--100); color: var(--sds--palette--support-color--500); } &:active { border-color: var(--sds--palette--support-color--500); background-color: var(--sds--palette--support-color--400); color: var(--sds--color--white); } &:disabled { border-color: var(--sds--color--gray--300); background-color: var(--sds--color--gray--100); color: var(--sds--color--gray--300); } } &--tertiary { &, &:link, &:visited { color: var(--sds--palette--support-color--400); } &:hover { background-color: var(--sds--palette--support-color--100); color: var(--sds--palette--support-color--500); } &:active { background-color: var(--sds--palette--support-color--100); color: var(--sds--palette--support-color--500); } &:disabled { background-color: var(--sds--color--gray--100); color: var(--sds--color--gray--300); } } &-destructive { &--primary { background-color: var(--sds--color--red--400); &, &:link, &:visited { color: var(--sds--color--white); } &:hover { background-color: var(--sds--color--red--500); } &:active { background-color: var(--sds--color--red--200); color: var(--sds--color--red--500); } &:disabled { background-color: var(--sds--color--gray--100); color: var(--sds--color--gray--300); } } &--secondary { border-color: var(--sds--color--gray--400); &, &:link, &:visited { color: var(--sds--color--gray--500); } &:hover { border-color: var(--sds--color--red--500); background-color: var(--sds--color--red--200); color: var(--sds--color--red--500); } &:active { border-color: var(--sds--color--red--500); background-color: var(--sds--color--red--400); color: var(--sds--color--white); } &:disabled { border-color: var(--sds--color--gray--300); background-color: var(--sds--color--gray--100); color: var(--sds--color--gray--300); } } &--tertiary { &, &:link, &:visited { color: var(--sds--color--red--400); } &:hover { background-color: var(--sds--color--red--200); color: var(--sds--color--red--500); } &:active { background-color: var(--sds--color--red--200); color: var(--sds--color--red--500); } &:disabled { background-color: var(--sds--color--gray--100); color: var(--sds--color--gray--300); } } } &--ghost--dark { border-color: var(--sds--color--gray--500); &, &:link, &:visited { color: var(--sds--color--black); } &:hover { background-color: var(--sds--color--black); border-color: var(--sds--color--black); color: var(--sds--color--white); } &:active { border-color: var(--sds--color--black); background-color: var(--sds--color--white); color: var(--sds--color--black); } } &--ghost--light { border-color: var(--sds--color--white); &, &:link, &:visited { color: var(--sds--color--white); } &:hover { background-color: var(--sds--color--white); border-color: var(--sds--color--white); color: var(--sds--color--black); } &:active { border-color: var(--sds--color--white); background-color: var(--sds--color--black); color: var(--sds--color--white); } } svg { [stroke-width] { stroke-width: rem(3px); } } } .sds--actions--outer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sds--space--1-and-a-half) var(--sds--space--3); }

Card

The card component itself doesn't have a defined width. This should be determined by the context it's used in, see for example layout.

Note that the alert component inside has no .sds--page-container since it's not needed here.

Demo

Verlengingen

1234567890123456789012345678901234567890123456789012345678901234567890123456... verloopt op 5 oktober 2022

12345678901234567890 verloopt op 5 oktober 2022

1234567890 verloopt op 23 mei 2023

Het gebruik van Eduroam zit op 99%.

ICT Inkoop - Licenties

Domein B

SURF contact

Sineke Vergeer

+31 1234 567 890

naam@surf.nl

Select all		Title	Title
Select row	Regular text	Regular text	Hyperlink
Select row	Regular text	Regular text	Hyperlink
Select row	Regular text	Regular text	Hyperlink
Select row	Regular text	Regular text	Hyperlink
Select row	Regular text	Regular text	Hyperlink

Het gebruik van Eduroam zit op 99%.

SURFeduhub

Datadiensten

Prijs p.m.

€ 16.000,-

SURF contact

Sineke Vergeer

+31 1234 567 890

naam@surf.nl

Verbruik

Juli 2022 (gemeten tot vandaag)	146 van 200
Juni 2022	146 van 200
Mei 2022	146 van 200

SURFeduhub

Datadiensten

Prijs p.m.

€ 16.000,-

SURF contact

Sineke Vergeer

+31 1234 567 890

naam@surf.nl

Verbruik

Juli 2022 (gemeten tot vandaag)	146 van 200
Juni 2022	146 van 200
Mei 2022	146 van 200

Code

HTML

<div class="sds--card sds--card--big"> <div class="sds--card--inner"> <h2 class="sds--space--bottom--2">Verlengingen</h2> <p>1234567890123456789012345678901234567890123456789012345678901234567890123456... verloopt op 5 oktober 2022</p> <p class="sds--space--top--1">12345678901234567890 verloopt op 5 oktober 2022</p> <p class="sds--space--top--1">1234567890 verloopt op 23 mei 2023</p> <div class="sds--space--top--3"> <button type="button" class="sds--btn sds--btn--primary">Ga naar de hele verlenglijst</button> </div> </div> </div> <div class="sds--card sds--card--big"> <div class="sds--alert sds--alert--status-warning"> <div class="sds--alert--inner"> <div class="sds--alert--visual"> <?php sizeable_svg("functional-icons/alert-triangle", 22.5/16 . "em", 22.5/16 . "em"); ?> </div> <div class="sds--alert--textual"> <p>Het gebruik van Eduroam zit op 99%. </p> </div> </div> </div> <div class="sds--card--inner"> <h5 class="sds--space--bottom--1">ICT Inkoop - Licenties</h5> <p class="sds--text--body--small">Domein B</p> <div class="sds--divider sds--space--top--2"></div> <div class="sds--card--price-and-contact sds--space--top--2"> <div class="contact"> <h6 class="sds--space--bottom--1">SURF contact</h6> <?php include("./sds/elements/components/contact-person/markup/contact-person.php"); ?> </div> </div> <div class="sds--space--top--2"> <?php include("./sds/elements/components/table/markup/table.php"); ?> </div> </div> </div> <div class="sds--card"> <div class="sds--alert sds--alert--status-warning"> <div class="sds--alert--inner"> <div class="sds--alert--visual"> <?php sizeable_svg("functional-icons/alert-triangle", 22.5/16 . "em", 22.5/16 . "em"); ?> </div> <div class="sds--alert--textual"> <p>Het gebruik van Eduroam zit op 99%. </p> </div> </div> </div> <div class="sds--card--inner"> <h5 class="sds--space--bottom--1">SURFeduhub</h5> <p class="sds--text--body--small">Datadiensten</p> <div class="sds--divider sds--space--top--1"></div> <div class="sds--card--price-and-contact sds--space--top--1"> <div class="price"> <h6 class="sds--space--bottom--1">Prijs p.m.</h6> <p class="sds--text--h4">€ 16.000,-</p> </div> <div class="contact"> <h6 class="sds--space--bottom--1">SURF contact</h6> <?php include("./sds/elements/components/contact-person/markup/contact-person.php"); ?> </div> </div> <div class="sds--space--top--3"> <h6 class="sds--space--bottom--1">Verbruik</h6> <?php include("./sds/elements/additional/table-basic/markup/table-basic.php"); ?> </div> </div> </div> <div class="sds--card"> <div class="sds--card--inner"> <h5 class="sds--space--bottom--1">SURFeduhub</h5> <p class="sds--text--body--small">Datadiensten</p> <div class="sds--divider sds--space--top--1"></div> <div class="sds--card--price-and-contact sds--space--top--1"> <div class="price"> <h6 class="sds--space--bottom--1">Prijs p.m.</h6> <p class="sds--text--h4">€ 16.000,-</p> </div> <div class="contact"> <h6 class="sds--space--bottom--1">SURF contact</h6> <?php include("./sds/elements/components/contact-person/markup/contact-person.php"); ?> </div> </div> <div class="sds--space--top--3"> <h6 class="sds--space--bottom--1">Verbruik</h6> <?php include("./sds/elements/additional/table-basic/markup/table-basic.php"); ?> </div> </div> </div>

SCSS

.sds--card { // Set variable to be able to nest "&" inside "&". $self: &; background-color: var(--sds--color--white); border: rem(1px) solid var(--sds--color--gray--300); &--big { #{$self}--inner { padding: var(--sds--space--4); } } &--inner { padding: var(--sds--space--3); } &--price-and-contact { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sds--space--2); .contact { margin-left: auto; } } }

Checkbox

Palette's main color applies here.

Demo

Multiple lines for longer data. Donec vitae sapien ut libero venenatis faucibus. Pellentesque auctor neque nec urna. Pellentesque posuere. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Curabitur ullamcorper ultricies nisi. Multiple lines for longer data. Donec vitae sapien ut libero venenatis faucibus. Pellentesque auctor neque nec urna. Pellentesque posuere. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Curabitur ullamcorper ultricies nisi. Disabled Disabled

Code

HTML

<input id="unique-checkbox-id" type="checkbox"/> <label for="unique-checkbox-id"> <span class="sds--checkbox--visual"> <?php sizeable_svg("functional-icons/checkbox-check", 13.62/16 . "em", 11.88/16 . "em"); ?> </span> <span class="checkbox--text">Multiple lines for longer data. Donec vitae sapien ut libero venenatis faucibus. Pellentesque auctor neque nec urna. Pellentesque posuere. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Curabitur ullamcorper ultricies nisi.</span> </label> <input id="unique-checkbox-id--2" type="checkbox" checked/> <label for="unique-checkbox-id--2"> <span class="sds--checkbox--visual"> <?php sizeable_svg("functional-icons/checkbox-check", 13.62/16 . "em", 11.88/16 . "em"); ?> </span> <span class="checkbox--text">Multiple lines for longer data. Donec vitae sapien ut libero venenatis faucibus. Pellentesque auctor neque nec urna. Pellentesque posuere. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Curabitur ullamcorper ultricies nisi.</span> </label> <input id="unique-checkbox-id--3" type="checkbox" disabled/> <label for="unique-checkbox-id--3"> <span class="sds--checkbox--visual"> <?php sizeable_svg("functional-icons/checkbox-check", 13.62/16 . "em", 11.88/16 . "em"); ?> </span> <span class="checkbox--text">Disabled</span> </label> <input id="unique-checkbox-id--4" type="checkbox" disabled checked/> <label for="unique-checkbox-id--4"> <span class="sds--checkbox--visual"> <?php sizeable_svg("functional-icons/checkbox-check", 13.62/16 . "em", 11.88/16 . "em"); ?> </span> <span class="checkbox--text">Disabled</span> </label>

SCSS

input[type="checkbox"] { // Hide browser default checkbox, but keep original position, // for when html form validation tries to reach it. @include visually-hidden(); + label { display: flex; align-items: baseline; gap: em(12px); .sds--checkbox--visual { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: rem(18px); height: rem(18px); border-radius: rem(2px); } } @include focus { + label { .sds--checkbox--visual { // Apply browser-default outline styling. @include outline-browser-default(); } } } &:not(:checked) { + label { .sds--checkbox--visual { svg { opacity: 0; } } } } &:not(:disabled) { &:not(:checked) { + label { .sds--checkbox--visual { border: rem(1px) solid var(--sds--color--gray--400); } } &:hover { + label { .sds--checkbox--visual { border-color: var(--sds--palette--main-color--400); } } } @include focus { + label { .sds--checkbox--visual { border-color: var(--sds--palette--main-color--500); } } } } &:checked { + label { .sds--checkbox--visual { background-color: var(--sds--palette--main-color--400); border-color: transparent; color: var(--sds--color--white); } } &:hover { + label { .sds--checkbox--visual { background-color: var(--sds--palette--main-color--500); } } } } } &:disabled { + label { .sds--checkbox--visual { background-color: var(--sds--color--gray--100); } } &:checked { + label { .sds--checkbox--visual { color: var(--sds--color--gray--400); } } } } }

Chips

The outer element doesn't have to be a button. Please choose a semantical correct element for your usecase.

Palette's main color applies here.

Demo

Code

HTML

SCSS

.sds--chips { padding: 0 var(--sds--space--1-and-a-half); @include align-icon-defaults(em(8px), center); border-radius: rem(16px); background-color: var(--sds--palette--main-color--100); &--visual { display: flex; } &--textual { padding: var(--sds--space--1) 0; display: block; font-weight: 600; } &:hover { background-color: var(--sds--palette--main-color--200); } &.is-active { background-color: var(--sds--palette--main-color--400); color: var(--sds--color--white); &:hover { background-color: var(--sds--palette--main-color--500); } } }

Contact-person

Palette's support color applies here.

Demo

Sineke Vergeer

+31 1234 567 890

Sineke Vergeer

naam@surf.nl

Sineke Vergeer

+31 1234 567 890

naam@surf.nl

Code

HTML

<div class="sds--contact-person"> <div class="sds--contact-person--visual"> <img src="" alt="" width="40" height="40"/> </div> <div class="sds--contact-person--textual"> <p>Sineke Vergeer</p> <p class="sds--text--body--small">+31 1234 567 890</p> </div> </div> <div class="sds--contact-person"> <div class="sds--contact-person--visual"> <img src="" alt="" width="40" height="40"/> </div> <div class="sds--contact-person--textual"> <p>Sineke Vergeer</p> <a href="" class="sds--text--body--small">naam@surf.nl</a> </div> </div> <div class="sds--contact-person"> <div class="sds--contact-person--visual"> <img src="" alt="" width="40" height="40"/> </div> <div class="sds--contact-person--textual"> <p>Sineke Vergeer</p> <p class="sds--text--body--small">+31 1234 567 890</p> <a href="" class="sds--text--body--small">naam@surf.nl</a> </div> </div>

SCSS

.sds--contact-person { display: flex; gap: var(--sds--space--1); align-items: flex-start; &--visual { width: rem(40px); height: rem(40px); border-radius: 50%; border: rem(1px) solid var(--sds--color--gray--300); overflow: hidden; } &--textual { a { @include text-link(); } } }

Content-card

The card component itself doesn't have a defined width. This should be determined by the context it's used in, see for example layout.

Demo

Title or product name

Example text for description. Lorem ipsum lorem ipsum

Title or product name

Example text for description. Lorem ipsum lorem ipsum

Title or product name

Example text for description. Lorem ipsum lorem ipsum

Code

HTML

<div class="sds--content-card sds--content-card--has-bottom"> <div class="sds--content-card--main"> <div class="sds--content-card--textual"> <h4 class="sds--space--bottom--1">Title or product name</h4> <p>Example text for description. Lorem ipsum lorem ipsum</p> </div> </div> <div class="sds--content-card--bottom"> <nav> <ul> <li> <a href="#">Hyperlink</a> </li> <li> <a href="#">Hyperlink</a> </li> </ul> </nav> </div> </div> <div class="sds--content-card sds--content-card--has-bottom"> <div class="sds--content-card--main"> <div class="sds--content-card--visual"> <?php include("./sds/elements/components/placeholder-image/markup/placeholder-image.php"); ?> </div> <div class="sds--content-card--textual"> <h4 class="sds--space--bottom--1">Title or product name</h4> <div class="sds--content-card--text-and-actions"> <p>Example text for description. Lorem ipsum lorem ipsum</p> <div class="sds--content-card--actions"> <button type="button" class="sds--btn sds--btn--primary">Default</button> </div> </div> </div> </div> <div class="sds--content-card--bottom"> <nav> <ul> <li> <a href="#">Hyperlink</a> </li> <li> <a href="#">Hyperlink</a> </li> </ul> </nav> </div> </div> <div class="sds--content-card"> <div class="sds--content-card--main"> <div class="sds--content-card--textual"> <h4 class="sds--space--bottom--1">Title or product name</h4> <div class="sds--content-card--text-and-actions"> <p>Example text for description. Lorem ipsum lorem ipsum</p> <div class="sds--content-card--actions"> <button type="button" class="sds--btn sds--btn--primary">Default</button> </div> </div> </div> </div> </div>

SCSS

.sds--content-card { // Set variable to be able to nest "&" inside "&". $self: &; background-color: var(--sds--color--white); border-radius: rem(6px); box-shadow: 0 rem(4px) rem(4px) 0 var(--sds--color--pitch-black--dimmed--25); &--main { padding: var(--sds--space--3); display: flex; gap: var(--sds--space--3); border: rem(1px) solid var(--sds--color--gray--200); border-radius: rem(6px); #{$self}--visual { flex: 0 0 auto; } #{$self}--textual { flex: 1 1 auto; } #{$self}--text-and-actions { display: flex; justify-content: space-between; gap: var(--sds--space--3); } #{$self}--actions { flex: 0 0 auto; } } &--bottom { background-color: var(--sds--color--gray--100); border-radius: 0 0 rem(6px) rem(6px); padding: var(--sds--space--2) var(--sds--space--3); nav { > ul { display: flex; flex-wrap: wrap; gap: var(--sds--space--3); } a { @include text-link(); } } } &--has-bottom { #{$self}--main { border-bottom-width: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } } }

Divider

Demo

Code

HTML

SCSS

.sds--divider { width: 100%; height: rem(1px); background-color: var(--sds--color--gray--300); }

Dropdown

Demo

Code

HTML

<div class="sds--dropdown"> <div class="sds--dropdown--input-and-icon"> <select name="unique-select-name"> <option value="menu-item-1">Menu-item 1</option> <option value="menu-item-2">Menu-item 2</option> <option value="menu-item-3">Menu-item 3</option> <option value="menu-item-4">Menu-item 4</option> </select> <span class="sds--dropdown--icon"> <?php sizeable_svg("functional-icons/arrow-down-2", 15/16 . "em", 7.29/16 . "em"); ?> </span> </div> </div> <div class="sds--dropdown"> <div class="sds--dropdown--input-and-icon"> <select name="unique-select-name--2" disabled> <option value="menu-item-1">Menu-item 1</option> <option value="menu-item-2">Menu-item 2</option> <option value="menu-item-3">Menu-item 3</option> <option value="menu-item-4">Menu-item 4</option> </select> <span class="sds--dropdown--icon"> <?php sizeable_svg("functional-icons/arrow-down-2", 15/16 . "em", 7.29/16 . "em"); ?> </span> </div> </div> <div class="sds--dropdown sds--dropdown--status-error"> <div class="sds--dropdown--input-and-icon"> <select name="unique-select-name--3"> <option value="menu-item-1">Menu-item 1</option> <option value="menu-item-2">Menu-item 2</option> <option value="menu-item-3">Menu-item 3</option> <option value="menu-item-4">Menu-item 4</option> </select> <span class="sds--dropdown--icon"> <?php sizeable_svg("functional-icons/arrow-down-2", 15/16 . "em", 7.29/16 . "em"); ?> </span> </div> <p class="sds--dropdown--message">Error message</p> </div> <div class="sds--dropdown"> <label for="unique-select-id--4">Label</label> <div class="sds--dropdown--input-and-icon"> <select id="unique-select-id--4" name="unique-select-name--4"> <option value="menu-item-1">Menu-item 1</option> <option value="menu-item-2">Menu-item 2</option> <option value="menu-item-3">Menu-item 3</option> <option value="menu-item-4">Menu-item 4</option> </select> <span class="sds--dropdown--icon"> <?php sizeable_svg("functional-icons/arrow-down-2", 15/16 . "em", 7.29/16 . "em"); ?> </span> </div> </div>

SCSS

.sds--dropdown { // Set variable to be able to nest "&" inside "&". $self: &; label { display: block; font-weight: 600; margin-bottom: var(--sds--space--1); } select { width: 100%; min-height: rem(48px); padding: var(--sds--space--1-and-a-half); padding-right: calc(var(--sds--space--1-and-a-half) + var(--sds--space--1-and-a-half) + #{rem(15px)}); border: rem(1px) solid var(--sds--color--gray--400); border-radius: rem(6px); appearance: none; &:not(:disabled) { border-color: var(--sds--color--gray--400); &:hover { border-color: var(--sds--color--black); } } &:disabled { background-color: var(--sds--color--gray--100); border-color: var(--sds--color--gray--100); + #{$self}--icon { color: var(--sds--color--gray--300); } } } &--message { margin-top: var(--sds--space--1); } &--status-error { #{$self}--message { color: var(--sds--color--red--400); } select { &:not(:disabled) { border-color: var(--sds--color--red--400); } } } &--input-and-icon { // To position icon. position: relative; #{$self}--icon { pointer-events: none; position: absolute; right: var(--sds--space--1-and-a-half); top: 50%; transform: translateY(-50%); // Take correct own height. display: flex; } } }

File-upload

Palette's support color applies here.

Demo

Het bestand is groter dan 10 MB

Bestanden tot 10 MB

Code

HTML

<div class="sds--file-upload sds--file-upload--status-error"> <input type="file"> <p class="sds--file-upload--message">Het bestand is groter dan 10 MB</p> </div> <div class="sds--file-upload sds--file-upload--status-success"> <input type="file"> </div> <div class="sds--file-upload"> <input type="file"> <p class="sds--file-upload--message sds--text--body--small">Bestanden tot 10 MB</p> </div>

SCSS

.sds--file-upload { // Set variable to be able to nest "&" inside "&". $self: &; border: rem(1px) dashed var(--sds--color--gray--300); padding: var(--sds--space--2) var(--sds--space--3); font-size: rem(18px); &:hover { border-color: var(--sds--palette--support-color--500); } input[type="file"] { &::file-selector-button { @include btn-reset(); color: var(--sds--palette--support-color--400); font-weight: 600; } } &--message { margin-top: var(--sds--space--1); } &--status-error { #{$self}--message { color: var(--sds--color--red--400); } } &--status-success { border-color: transparent; background-color: var(--sds--color--white); } }

Link-list

In typography default list styling is removed from ul and ol. They recieve basic styling when inside .sds--text--rich.

Other list need specific markup and styling.

Demo

Code

HTML

<ul class="sds--link-list sds--link-list--landing"> <li> <a href="#"> <?php sizeable_svg("functional-icons/arrow-right-2", 5.4/16 . "em", 11.14/16 . "em"); ?> <span class="text">Chocolate Cake</span> </a> </li> <li> <a href="#"> <?php sizeable_svg("functional-icons/arrow-right-2", 5.4/16 . "em", 11.14/16 . "em"); ?> <span class="text">Black Forest Cake</span> </a> </li> <li> <a href="#"> <?php sizeable_svg("functional-icons/arrow-right-2", 5.4/16 . "em", 11.14/16 . "em"); ?> <span class="text">Pineapple Cake</span> </a> </li> </ul> <ul class="sds--link-list sds--link-list--generic"> <li> <a href="#"> <?php sizeable_svg("functional-icons/arrow-right-2", 5.4/16 . "em", 11.14/16 . "em"); ?> <span class="text">Fasten your seatbelt</span> </a> </li> <li> <a href="#"> <?php sizeable_svg("functional-icons/arrow-right-2", 5.4/16 . "em", 11.14/16 . "em"); ?> <span class="text">Starts the car's engine</span> </a> </li> <li> <a href="#"> <?php sizeable_svg("functional-icons/arrow-right-2", 5.4/16 . "em", 11.14/16 . "em"); ?> <span class="text">Look around and go</span> </a> </li> </ul>

SCSS

.sds--link-list { a { @include lnk-decoration(show); @include align-icon-defaults(); svg { [stroke-width] { stroke-width: rem(3px); } } } &--generic { > li { + li { margin-top: var(--sds--space--1); } } } &--landing { > li { + li { margin-top: var(--sds--space--2); } &:last-child { a { @include text-link(); } } } } }

Link

Palette's support color applies here.

Anchor (a) styling is defined in typography. Similar styling can be applied to others elements via .sds--lnk.

There is also a class for links that don't have underline by default: .sds--lnk--no-underline.

Demo

Curabitur turpis. Cras varius. Aenean ut eros et nisl sagittis vestibulum. Curabitur nisi. Class default link styling ad litora torquent per conubia nostra, per inceptos hymenaeos.

Pulvinar leo id risus vestibulum. Sed diam link without underline libero, sodales eget sapien vel, porttitor bibendum enim. Donec sed nibh vitae lorem porttitor blandit in nec ante. Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem condimentum. Etiam in aliquam lectus. Nam vel sapien diam. Donec pharetra id arcu eget blandit.

Code

HTML

<div class="sds--text--rich"> <p>Curabitur turpis. Cras varius. Aenean ut eros et nisl sagittis vestibulum. Curabitur nisi. Class <a href="#">default link styling</a> ad litora torquent per conubia nostra, per inceptos hymenaeos.</p> </div> <p>Pulvinar leo id risus vestibulum. Sed diam <a href="#" class="sds--lnk--no-underline">link without underline</a> libero, sodales eget sapien vel, porttitor bibendum enim. Donec sed nibh vitae lorem porttitor blandit in nec ante. Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem <button class="sds--lnk">link styling applied to button</button> condimentum. Etiam in aliquam lectus. Nam vel sapien diam. Donec pharetra id arcu eget blandit.</p>

SCSS

.sds--lnk { @include text-link(); // When applying link-styling via this class, // we assume the element is not a link. // A link would have text-decoration by default. &:not(:link) { text-decoration: underline; } &--no-underline { @include text-link(); &:not(:hover) { text-decoration: none; } } }

Loading

The outer element doesn't have to be a div.

Demo

Code

HTML

SCSS

.sds--loading { // Set variable to be able to nest "&" inside "&". $self: &; display: flex; gap: rem(2px); &--dot { display: block; width: rem(8px); height: rem(8px); border-radius: 50%;; border: rem(2px) solid var(--sds--color--gray--400); background-color: var(--sds--color--gray--400); &.is-active { background-color: transparent; } } }

Modal

Normally the modal takes over the whole page. For this demo page we unset some styling so the rest of the page is also available.

Note that the alert component inside has no .sds--page-container since it's not needed here.

Palette's main and support color applies here.

Demo

Code

HTML

<div class="sds--modal sds--backdrop"> <div class="sds--modal--container"> <div class="sds--modal--title"> <p class="sds--text--h4">Title</p> <?php sizeable_svg("functional-icons/close", 12/16 . "em", 12/16 . "em"); ?> </div> <div class="sds--alert sds--alert--status-info"> <div class="sds--alert--inner"> <div class="sds--alert--visual"> <?php sizeable_svg("functional-icons/info", 22.5/16 . "em", 22.5/16 . "em"); ?> </div> <div class="sds--alert--textual"> <p>Info</p> </div> </div> </div> <div class="sds--modal--content"> <div class="sds--text--rich"> <p>This is an example text that can be replaced when using a simple modal. You can also use a <a href="#">hyperlink</a> if it’s necessary. For more complex modals we advise you to use a Blank modal as base.</p> <p>Second paragraph can be used if there is more text.</p> </div> <div class="sds--modal--actions sds--actions--outer sds--space--top--5"> <button type="button" class="sds--btn sds--btn--secondary">Secondary button</button> <button type="button" class="sds--btn sds--btn--primary">Primary button</button> </div> </div> </div> </div>

SCSS

.sds--modal { &.sds--backdrop { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; overflow: auto; } &--container { max-width: rem(510px); margin: auto; border-radius: rem(8px); overflow: hidden; box-shadow: 0 rem(4px) rem(4px) rem(1px) var(--sds--color--pitch-black--dimmed--25); } &--title { background-color: var(--sds--palette--main-color--400); color: var(--sds--color--white); padding: var(--sds--space--2) var(--sds--space--3); display: flex; justify-content: space-between; gap: var(--sds--space--1); } &--content { background-color: var(--sds--color--white); padding: var(--sds--space--3); } &--actions { justify-content: flex-end; } }

Pagination

Palette's main color applies here.

Note that a link can be "disabled" by not setting the href attribute.

Demo

Code

HTML

SCSS

.sds--pagination { &--nav { ul { display: flex; gap: var(--sds--space--1); } a, .link-placeholder { width: rem(40px); height: rem(40px); display: inline-flex; align-items: center; justify-content: center; border: rem(1px) solid transparent; border-radius: rem(6px); } a { text-decoration: none; &:not(:link) { background-color: var(--sds--color--gray--100); border-color: var(--sds--color--gray--300); color: var(--sds--color--gray--300); } &:link, &:visited { border-color: var(--sds--color--gray--400); color: var(--sds--color--gray--500); &.is-active, &:active, &:hover { background-color: var(--sds--palette--main-color--100); color: var(--sds--palette--main-color--500); border-color: var(--sds--palette--main-color--500); } } } .link-placeholder { border-color: var(--sds--color--gray--400); color: var(--sds--color--gray--500); } } }

Placeholder-image

The outer element doesn't have to be a span.

Demo

Code

HTML

SCSS

.sds--placeholder-image { border: rem(1px) solid var(--sds--color--gray--300); background-color: var(--sds--color--white); color: var(--sds--color--gray--300); display: inline-block; svg { display: block; } }

Radio

Palette's main color applies here.

Demo

Code

HTML

<input id="unique-radio-id" type="radio"/> <label for="unique-radio-id"> <span class="sds--radio--visual"></span> <span class="sds--radio--text">Multiple lines for longer data. Donec vitae sapien ut libero venenatis faucibus. Pellentesque auctor neque nec urna. Pellentesque posuere. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Curabitur ullamcorper ultricies nisi.</span> </label> <input id="unique-radio-id--2" type="radio" checked/> <label for="unique-radio-id--2"> <span class="sds--radio--visual"></span> <span class="sds--radio--text">Multiple lines for longer data. Donec vitae sapien ut libero venenatis faucibus. Pellentesque auctor neque nec urna. Pellentesque posuere. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Curabitur ullamcorper ultricies nisi.</span> </label> <input id="unique-radio-id--3" type="radio" disabled/> <label for="unique-radio-id--3"> <span class="sds--radio--visual"></span> <span class="sds--radio--text">Disabled</span> </label> <input id="unique-radio-id--4" type="radio" disabled checked/> <label for="unique-radio-id--4"> <span class="sds--radio--visual"></span> <span class="sds--radio--text">Disabled</span> </label>

SCSS

input[type="radio"] { // Hide browser default radio, but keep original position, // for when html form validation tries to reach it. @include visually-hidden(); + label { display: flex; align-items: baseline; gap: em(12px); .sds--radio--visual { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: rem(18px); height: rem(18px); border-radius: 50%; border: rem(1px) solid transparent; &:before { content: ""; width: rem(10px); height: rem(10px); border-radius: 50%; background-color: transparent; } } } @include focus { + label { .sds--radio--visual { // Apply browser-default outline styling. @include outline-browser-default(); } } } &:not(:disabled) { &:not(:checked) { + label { .sds--radio--visual { border-color: var(--sds--color--gray--400); } } &:hover { + label { .sds--radio--visual { border-color: var(--sds--palette--main-color--400); } } } @include focus { + label { .sds--radio--visual { border-color: var(--sds--palette--main-color--500); } } } } &:checked { + label { .sds--radio--visual { border-color: var(--sds--palette--main-color--400); &:before { background-color: var(--sds--palette--main-color--400); } } } &:hover { + label { .sds--radio--visual { border-color: var(--sds--palette--main-color--500); &:before { background-color: var(--sds--palette--main-color--500); } } } } @include focus { + label { .sds--radio--visual { border-color: var(--sds--palette--main-color--400); &:before { background-color: var(--sds--palette--main-color--400); } } } } } } &:disabled { + label { .sds--radio--visual { background-color: var(--sds--color--gray--100); } } &:checked { + label { .sds--radio--visual { &:before { background-color: var(--sds--color--gray--400); } } } } } }

Switch

Palette's support color applies here.

Demo

Code

HTML

SCSS

.sds--switch { background-color: var(--sds--color--gray--300); width: rem(56px); height: rem(32px); border-radius: rem(16px); padding: rem(3px); display: inline-block; &:hover { background-color: var(--sds--color--gray--400); } &:before { content: ""; display: block; background-color: var(--sds--color--white); width: rem(26px); height: rem(26px); border-radius: rem(13px); position: relative; } &--active { background-color: var(--sds--palette--support-color--400); &:before { left: rem(24px); } &:hover { background-color: var(--sds--palette--support-color--500); &:before { background-color: var(--sds--palette--support-color--100); } } } }

Tab-navigation

Palette's support color applies here.

Demo

Code

HTML

<div class="sds--tab-navigation sds--tab-navigation--basic"> <nav class="sds--tab-navigation--nav"> <ul> <li> <button type="button" id="unique-button-item--11" class="active" role="tab" aria-controls="unique-tab-item--11" aria-selected="true">Tab-item 1</button> </li> <li> <button type="button" id="unique-button-item--12" role="tab" aria-controls="unique-tab-item--12" aria-selected="false">Tab-item 2</button> </li> <li> <button type="button" id="unique-button-item--13" role="tab" aria-controls="unique-tab-item--13" aria-selected="false">Tab-item 3</button> </li> <li> <button type="button" id="unique-button-item--14" role="tab" aria-controls="unique-tab-item--14" aria-selected="false">Tab-item 4</button> </li> <li> <button type="button" id="unique-button-item--15" role="tab" aria-controls="unique-tab-item--15" aria-selected="false">Tab-item 5</button> </li> </ul> </nav> <div id="unique-tab-item--11" class="sds--tab-navigation--content" role="tabpanel" aria-labelledby="unique-button-item--11"> </div> </div> <div class="sds--tab-navigation sds--tab-navigation--bordered"> <nav class="sds--tab-navigation--nav"> <ul> <li> <button type="button" id="unique-button-item--6" class="active" role="tab" aria-controls="unique-tab-item--6" aria-selected="true">Tab-item 1</button> </li> <li> <button type="button" id="unique-button-item--7" role="tab" aria-controls="unique-tab-item--7" aria-selected="false">Tab-item 2</button> </li> <li> <button type="button" id="unique-button-item--8" role="tab" aria-controls="unique-tab-item--8" aria-selected="false">Tab-item 3</button> </li> <li> <button type="button" id="unique-button-item--9" role="tab" aria-controls="unique-tab-item--9" aria-selected="false">Tab-item 4</button> </li> <li> <button type="button" id="unique-button-item--10" role="tab" aria-controls="unique-tab-item--10" aria-selected="false">Tab-item 5</button> </li> </ul> </nav> <div id="unique-tab-item--6" class="sds--tab-navigation--content" role="tabpanel" aria-labelledby="unique-button-item--6"> Tab 1 content </div> </div> <div class="sds--tab-navigation sds--tab-navigation--default"> <nav class="sds--tab-navigation--nav"> <ul> <li> <button type="button" id="unique-button-item--1" class="active" role="tab" aria-controls="unique-tab-item--1" aria-selected="true">Tab-item 1</button> </li> <li> <button type="button" id="unique-button-item--2" role="tab" aria-controls="unique-tab-item--2" aria-selected="false">Tab-item 2</button> </li> <li> <button type="button" id="unique-button-item--3" role="tab" aria-controls="unique-tab-item--3" aria-selected="false">Tab-item 3</button> </li> <li> <button type="button" id="unique-button-item--4" role="tab" aria-controls="unique-tab-item--4" aria-selected="false">Tab-item 4</button> </li> <li> <button type="button" id="unique-button-item--5" role="tab" aria-controls="unique-tab-item--5" aria-selected="false">Tab-item 5</button> </li> </ul> </nav> <div id="unique-tab-item--1" class="sds--tab-navigation--content" role="tabpanel" aria-labelledby="unique-button-item--1"> </div> </div>

SCSS

.sds--tab-navigation { // Set variable to be able to nest "&" inside "&". $self: &; &--nav { ul { display: flex; gap: var(--sds--space--1); } button { @include btn-reset(); padding: var(--sds--space--1-and-a-half) var(--sds--space--2); min-height: rem(48px); font-weight: 600; } } &--default { #{$self}--nav { button { background-color: var(--sds--color--gray--300); border: rem(1px) solid transparent; border-top-width: rem(3px); &:hover { background-color: var(--sds--palette--support-color--100); } &.active { background-color: var(--sds--color--white); border-top-color: var(--sds--palette--support-color--400); &:hover { background-color: var(--sds--palette--support-color--100); } } } } } &--bordered { #{$self}--nav { button { background-color: var(--sds--color--gray--200); border: rem(1px) solid transparent; border-top-width: rem(3px); border-bottom-color: var(--sds--color--gray--300); &:hover { background-color: var(--sds--palette--support-color--100); } &.active { background-color: var(--sds--color--white); border-top-color: var(--sds--palette--support-color--400); border-left-color: var(--sds--color--gray--300); border-right-color: var(--sds--color--gray--300); border-bottom-color: var(--sds--color--white); &:hover { background-color: var(--sds--palette--support-color--100); } } } } #{$self}--content { border: rem(1px) solid var(--sds--color--gray--300); margin-top: rem(-1px); } } &--basic { #{$self}--nav { border-bottom: rem(1px) solid var(--sds--color--gray--300); button { border-bottom: rem(4px) solid transparent; color: var(--sds--palette--support-color--400); &:hover { color: var(--sds--palette--support-color--500); } &.active { color: var(--sds--color--black); border-bottom-color: var(--sds--palette--support-color--400); box-shadow: 0 rem(1px) 0 0 var(--sds--palette--support-color--400); } } } } }

Table

Palette's main color applies here.

Demo

Select all		Title	Title
Select row	Regular text	Regular text	Hyperlink
Select row	Regular text	Regular text	Hyperlink
Select row	Regular text	Regular text	Hyperlink
Select row	Regular text	Regular text	Hyperlink
Select row	Regular text	Regular text	Hyperlink

Code

HTML

<div class="sds--table"> <table> <thead> <tr> <th> <input id="unique-checkbox-id" type="checkbox"/> <label for="unique-checkbox-id"> <span class="sds--checkbox--visual"> <?php sizeable_svg("functional-icons/checkbox-check", 13.62/16 . "em", 11.88/16 . "em"); ?> </span> <span class="checkbox--text sds--visually-hidden">Select all</span> </label> </th> <th> <div class="sds--table-tr--actions"> <button type="button" class="sds--btn-reset"> <span class="text">Title</span> <span class="visual"> <?php sizeable_svg("functional-icons/arrow-up-3", 5.87/16 . "em", 5.02/16 . "em"); ?> <?php sizeable_svg("functional-icons/arrow-down-3", 5.87/16 . "em", 5.02/16 . "em"); ?> </span> </button> </div> </th> <th>Title</th> <th>Title</th> <th>Title</th> <th>Title</th> </tr> </thead> <tbody> <tr> <td> <input id="unique-checkbox-id--2" type="checkbox"/> <label for="unique-checkbox-id--2"> <span class="sds--checkbox--visual"> <?php sizeable_svg("functional-icons/checkbox-check", 13.62/16 . "em", 11.88/16 . "em"); ?> </span> <span class="checkbox--text sds--visually-hidden">Select row</span> </label> </td> <td>Regular text</td> <td>Regular text</td> <td><a href="#">Hyperlink</a></td> <td></td> <td> <div class="sds--table-td--actions"> <button type="button" class="sds--btn-reset"> <?php sizeable_svg("functional-icons/add", 22.5/16 . "em", 22.5/16 . "em"); ?> <span class="sds--visually-hidden">Add</span> </button> <button type="button" class="sds--btn-reset"> <?php sizeable_svg("functional-icons/edit", 22.5/16 . "em", 22.5/16 . "em"); ?> <span class="sds--visually-hidden">Edit</span> </button> <button type="button" class="sds--btn-reset"> <?php sizeable_svg("functional-icons/bin", 21/16 . "em", 21/16 . "em"); ?> <span class="sds--visually-hidden">Delete</span> </button> </div> </td> </tr> <tr> <td> <input id="unique-checkbox-id--3" type="checkbox" checked/> <label for="unique-checkbox-id--3"> <span class="sds--checkbox--visual"> <?php sizeable_svg("functional-icons/checkbox-check", 13.62/16 . "em", 11.88/16 . "em"); ?> </span> <span class="checkbox--text sds--visually-hidden">Select row</span> </label> </td> <td>Regular text</td> <td>Regular text</td> <td><a href="#">Hyperlink</a></td> <td><?php include("./sds/elements/components/badge/markup/badge.php"); ?></td> <td> <div class="sds--table-td--actions"> <button type="button" class="sds--btn-reset"> <?php sizeable_svg("functional-icons/add", 22.5/16 . "em", 22.5/16 . "em"); ?> <span class="sds--visually-hidden">Add</span> </button> <button type="button" class="sds--btn-reset"> <?php sizeable_svg("functional-icons/edit", 22.5/16 . "em", 22.5/16 . "em"); ?> <span class="sds--visually-hidden">Edit</span> </button> <button type="button" class="sds--btn-reset"> <?php sizeable_svg("functional-icons/bin", 21/16 . "em", 21/16 . "em"); ?> <span class="sds--visually-hidden">Delete</span> </button> </div> </td> </tr> <tr> <td> <input id="unique-checkbox-id--4" type="checkbox"/> <label for="unique-checkbox-id--4"> <span class="sds--checkbox--visual"> <?php sizeable_svg("functional-icons/checkbox-check", 13.62/16 . "em", 11.88/16 . "em"); ?> </span> <span class="checkbox--text sds--visually-hidden">Select row</span> </label> </td> <td>Regular text</td> <td>Regular text</td> <td><a href="#">Hyperlink</a></td> <td><?php include("./sds/elements/components/badge/markup/badge.php"); ?></td> <td> <div class="sds--table-td--actions"> <button type="button" class="sds--btn-reset"> <?php sizeable_svg("functional-icons/add", 22.5/16 . "em", 22.5/16 . "em"); ?> <span class="sds--visually-hidden">Add</span> </button> <button type="button" class="sds--btn-reset"> <?php sizeable_svg("functional-icons/edit", 22.5/16 . "em", 22.5/16 . "em"); ?> <span class="sds--visually-hidden">Edit</span> </button> <button type="button" class="sds--btn-reset"> <?php sizeable_svg("functional-icons/bin", 21/16 . "em", 21/16 . "em"); ?> <span class="sds--visually-hidden">Delete</span> </button> </div> </td> </tr> <tr> <td> <input id="unique-checkbox-id--5" type="checkbox"/> <label for="unique-checkbox-id--5"> <span class="sds--checkbox--visual"> <?php sizeable_svg("functional-icons/checkbox-check", 13.62/16 . "em", 11.88/16 . "em"); ?> </span> <span class="checkbox--text sds--visually-hidden">Select row</span> </label> </td> <td>Regular text</td> <td>Regular text</td> <td><a href="#">Hyperlink</a></td> <td></td> <td> <div class="sds--table-td--actions"> <button type="button" class="sds--btn-reset"> <?php sizeable_svg("functional-icons/add", 22.5/16 . "em", 22.5/16 . "em"); ?> <span class="sds--visually-hidden">Add</span> </button> <button type="button" class="sds--btn-reset"> <?php sizeable_svg("functional-icons/edit", 22.5/16 . "em", 22.5/16 . "em"); ?> <span class="sds--visually-hidden">Edit</span> </button> <button type="button" class="sds--btn-reset"> <?php sizeable_svg("functional-icons/bin", 21/16 . "em", 21/16 . "em"); ?> <span class="sds--visually-hidden">Delete</span> </button> </div> </td> </tr> <tr class="is-active"> <td> <input id="unique-checkbox-id--6" type="checkbox"/> <label for="unique-checkbox-id--6"> <span class="sds--checkbox--visual"> <?php sizeable_svg("functional-icons/checkbox-check", 13.62/16 . "em", 11.88/16 . "em"); ?> </span> <span class="checkbox--text sds--visually-hidden">Select row</span> </label> </td> <td>Regular text</td> <td>Regular text</td> <td><a href="#">Hyperlink</a></td> <td></td> <td> <div class="sds--table-td--actions"> <button type="button" class="sds--btn-reset"> <?php sizeable_svg("functional-icons/add", 22.5/16 . "em", 22.5/16 . "em"); ?> <span class="sds--visually-hidden">Add</span> </button> <button type="button" class="sds--btn-reset"> <?php sizeable_svg("functional-icons/edit", 22.5/16 . "em", 22.5/16 . "em"); ?> <span class="sds--visually-hidden">Edit</span> </button> <button type="button" class="sds--btn-reset"> <?php sizeable_svg("functional-icons/bin", 21/16 . "em", 21/16 . "em"); ?> <span class="sds--visually-hidden">Delete</span> </button> </div> </td> </tr> </tbody> </table> <div class="sds--space--top--3"> <?php include("./sds/elements/components/pagination/markup/pagination.php"); ?> </div> </div>

SCSS

.sds--table { // Set variable to be able to nest "&" inside "&". $self: &; table { width: 100%; border-collapse: collapse; border-spacing: 0; th, td { padding: var(--sds--space--2); text-align: left; vertical-align: top; } th { font-weight: 600; border-bottom: rem(1px) solid var(--sds--color--black); } td { border-bottom: rem(1px) solid var(--sds--color--gray--300); } tbody { tr { &.is-active, &:hover { background-color: var(--sds--color--gray--200); } } } a { @include text-link(); } #{$self}-tr--actions { button { @include align-icon-defaults(rem(5px), center); .visual { display: flex; flex-direction: column; gap: rem(3px); } } } #{$self}-td--actions { display: flex; gap: var(--sds--space--2); align-items: center; justify-content: flex-end; } } }

Text-area

Use the rows attribute to set a default height.

Demo

Error message

Label

Helper text

Code

HTML

<div class="sds--text-area"> <textarea placeholder="Placeholder" rows=3 disabled></textarea> </div> <div class="sds--text-area sds--text-area--status-error"> <textarea placeholder="Placeholder" rows=5></textarea> <p class="sds--text-area--message">Error message</p> </div> <div class="sds--text-area"> <label for="unique-textarea-id">Label</label> <textarea id="unique-textarea-id" placeholder="Placeholder" rows=10></textarea> <p class="sds--text-area--message">Helper text</p> </div>

SCSS

.sds--text-area { // Set variable to be able to nest "&" inside "&". $self: &; label { display: block; font-weight: 600; margin-bottom: var(--sds--space--1); } // Target input via class, because it can be of many types. textarea { width: 100%; min-height: rem(48px); padding: var(--sds--space--1-and-a-half); border: rem(1px) solid transparent; border-radius: rem(6px); // Take correct own height. display: block; &::-moz-placeholder { opacity: 1; } &::placeholder { opacity: 1; color: var(--sds--color--gray--400); } &:not(:disabled) { border-color: var(--sds--color--gray--400); &:hover { border-color: var(--sds--color--black); } } &:disabled { background-color: var(--sds--color--gray--100); border-color: var(--sds--color--gray--100); } } &--message { margin-top: var(--sds--space--1); } &--status-error { #{$self}--message { color: var(--sds--color--red--400); } textarea { &:not(:disabled) { border-color: var(--sds--color--red--400); } } } }

Text-field

Demo

Error message

Label

Helper text

Code

HTML

<div class="sds--text-field"> <input class="sds--text-field--input" type="text" placeholder="Placeholder" disabled/> </div> <div class="sds--text-field sds--text-field--status-error"> <input class="sds--text-field--input" type="text" placeholder="Placeholder"/> <p class="sds--text-field--message">Error message</p> </div> <div class="sds--text-field sds--text-field--has-icon"> <div class="sds--text-field--shape"> <div class="sds--text-field--input-and-icon"> <input class="sds--text-field--input" type="search" placeholder="Placeholder"/> <span class="sds--text-field--icon"> <?php sizeable_svg("functional-icons/search", 15/16 . "em", 15/16 . "em"); ?> </span> </div> <button type="button" class="sds--btn sds--btn--primary">Search</button> </div> </div> <div class="sds--text-field"> <label for="unique-input-id">Label</label> <input id="unique-input-id" class="sds--text-field--input" type="text" placeholder="Placeholder"/> <p class="sds--text-field--message">Helper text</p> </div>

SCSS

.sds--text-field { // Set variable to be able to nest "&" inside "&". $self: &; label { display: block; font-weight: 600; margin-bottom: var(--sds--space--1); } // Target input via class, because it can be of many types. input#{$self}--input { width: 100%; min-height: rem(48px); padding: var(--sds--space--1-and-a-half); border: rem(1px) solid transparent; border-radius: rem(6px); &::-moz-placeholder { opacity: 1; } &::placeholder { opacity: 1; color: var(--sds--color--gray--400); } &:not(:disabled) { border-color: var(--sds--color--gray--400); &:hover { border-color: var(--sds--color--black); } } &:disabled { background-color: var(--sds--color--gray--100); border-color: var(--sds--color--gray--100); } } &--shape { display: flex; gap: var(--sds--space--2); } &--message { margin-top: var(--sds--space--1); } &--status-error { #{$self}--message { color: var(--sds--color--red--400); } input#{$self}--input { &:not(:disabled) { border-color: var(--sds--color--red--400); } } } &--has-icon { #{$self}--input-and-icon { flex-grow: 1; // To position icon. position: relative; input#{$self}--input { padding-right: calc(var(--sds--space--1-and-a-half) + #{rem(25px)}); flex-grow: 1; } #{$self}--icon { position: absolute; right: var(--sds--space--1-and-a-half); top: 50%; transform: translateY(-50%); // Take correct own height. display: flex; } } } }

Toaster

Note that applying icon-color is done by applying .bg to an element inside the svg. The lines are always white (no extra class needed).

Demo

Anatomy

Toaster with single line

Variants

Default

Warning

Error

Info

Code

HTML

<h5>Anatomy</h5> <div class="demo-row"> <div class="sds--toaster sds--toaster--status-success"> <div class="sds--toaster--visual"> <?php sizeable_svg("functional-icons/success", 22.5/16 . "em", 22.5/16 . "em"); ?> </div> <div class="sds--toaster--textual"> <p>Toaster with single line</p> <button type="button" class="sds--btn sds--btn--ghost--dark sds--btn--small">Action</button> </div> </div> </div> <h5>Variants</h5> <div class="demo-row"> <div class="sds--toaster sds--toaster--status-default"> <div class="sds--toaster--visual"> <?php sizeable_svg("functional-icons/info", 22.5/16 . "em", 22.5/16 . "em"); ?> </div> <div class="sds--toaster--textual"> <p>Default</p> </div> </div> <div class="sds--toaster sds--toaster--status-success"> <div class="sds--toaster--visual"> <?php sizeable_svg("functional-icons/success", 22.5/16 . "em", 22.5/16 . "em"); ?> </div> <div class="sds--toaster--textual"> <p>Default</p> </div> </div> <div class="sds--toaster sds--toaster--status-warning"> <div class="sds--toaster--visual"> <?php sizeable_svg("functional-icons/alert-triangle", 22.5/16 . "em", 22.5/16 . "em"); ?> </div> <div class="sds--toaster--textual"> <p>Warning</p> </div> </div> <div class="sds--toaster sds--toaster--status-error"> <div class="sds--toaster--visual"> <?php sizeable_svg("functional-icons/alert-triangle", 22.5/16 . "em", 22.5/16 . "em"); ?> </div> <div class="sds--toaster--textual"> <p>Error</p> </div> </div> <div class="sds--toaster sds--toaster--status-info"> <div class="sds--toaster--visual"> <?php sizeable_svg("functional-icons/info", 22.5/16 . "em", 22.5/16 . "em"); ?> </div> <div class="sds--toaster--textual"> <p>Info</p> </div> </div> </div>

SCSS

.sds--toaster { max-width: rem(400px); min-height: rem(60px); padding: var(--sds--space--1) var(--sds--space--2); display: inline-flex; align-items: center; gap: var(--sds--space--2); border-radius: rem(4px); box-shadow: 0 rem(4px) rem(4px) var(--sds--color--pitch-black--dimmed--25); &--visual { flex-shrink: 0; display: flex; svg { color: var(--sds--color--white); } } &--textual { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sds--space--1-and-a-half) var(--sds--space--2); } // Apply status colors. // See "$status-colors" for defined status-colors. @each $status, $settings in $status-colors { &--status-#{$status} { background-color: map-get($settings, bg); p { color: map-get($settings, color); } svg { .bg { fill: map-get($settings, icon-bg); } } } } }

View-switch

Palette's support color applies here.

Demo

Code

HTML

SCSS

.sds--view-switch { display: flex; flex-wrap: wrap; gap: var(--sds--space--2); &--button { @include align-icon-defaults($alignment: center); justify-content: center; width: rem(40px); height: rem(40px); border-radius: rem(8px); border: rem(1px) solid var(--sds--palette--support-color--400); color: var(--sds--palette--support-color--400); &:hover { background-color: var(--sds--palette--support-color--500); color: var(--sds--color--white); border-color: transparent; } &.is-active { background-color: var(--sds--palette--support-color--400); color: var(--sds--color--white); border-color: transparent; &:hover { background-color: var(--sds--palette--support-color--500); } } } }

Foundation

Color

Colors are defined as css-variable. The value of all color-variables are set on a high level (:root). If a color needs to be applied, you can do so by refering to the variable-name. All colors for the SURF Design System are applied this way.

The four predefined color palettes are also available. When a class is set (eg .sds--color-palette--orange) the palette is applied and cascades down to all elements that make use of the palette. See for example application header where the red palette is applied to one of the demo's

Note that applying color via inline style is not the normal way to go, but is only for demo purposes.

Demo

Available palettes

Blue

Main 100

Main 200

Main 300

Main 400

Main 500

Support 100

Support 400

Support 500

Green

Main 100

Main 200

Main 300

Main 400

Main 500

Support 100

Support 400

Support 500

Neutral

Main 100

Main 200

Main 300

Main 400

Main 500

Support 100

Support 400

Support 500

Orange

Main 100

Main 200

Main 300

Main 400

Main 500

Support 100

Support 400

Support 500

Code

HTML

<h5>Available palettes</h5> <?php $palettes = ['blue', 'green', 'neutral', 'orange']; $main_weights = ['100', '200', '300', '400', '500']; $support_weights = ['100', '400', '500']; foreach ($palettes as $palette) { echo '<div class="sds--color-palette--' . $palette . '">'; echo '<h6>' . ucfirst($palette) . '</h6>'; echo '<div class="demo-row">'; foreach ($main_weights as $main_weight) { echo '<div>'; echo '<div style="background-color: var(--sds--palette--main-color--' . $main_weight . '); width: 100px; height: 50px;"></div>'; echo '<p>Main ' . $main_weight .'</p>'; echo '</div>'; } foreach ($support_weights as $support_weight) { echo '<div>'; echo '<div style="background-color: var(--sds--palette--support-color--' . $support_weight . '); width: 100px; height: 50px;"></div>'; echo '<p>Support ' . $support_weight .'</p>'; echo '</div>'; } echo '</div>'; echo '</div>'; } ?>

SCSS

:root { // Base. --sds--color--black: #050E1D; --sds--color--pitch-black--dimmed--15: #00000026 ; --sds--color--pitch-black--dimmed--25: #00000040 ; --sds--color--white: #FFFFFF; --sds--color--white--dimmed--70: #FFFFFFB3; // Gray. --sds--color--gray--100: #F4F6F8; --sds--color--gray--200: #EAECF0; --sds--color--gray--300: #B2B6BE; --sds--color--gray--400: #8C969F; --sds--color--gray--500: #5E6873; // Yellow. // Note that 300 variant is not defined in the design, // and 100 and 200 have the same value. // --sds--color--yellow--100: #FEF8D3; --sds--color--yellow--200: #FEF8D3; // --sds--color--yellow--400: #FEDB00; --sds--color--yellow--500: #FFC100; // Green. --sds--color--green--100: #DCF2E5; --sds--color--green--200: #B8E3C9; --sds--color--green--300: #17A95D; --sds--color--green--400: #008939; --sds--color--green--500: #006731; // Blue. --sds--color--blue--100: #DFF4FF; --sds--color--blue--200: #B3E5FF; --sds--color--blue--300: #78BEFD; --sds--color--blue--400: #0077C8; --sds--color--blue--500: #004C97; // Red. // --sds--color--red--100: #FFE5E3; --sds--color--red--200: #FFCDCA; // --sds--color--red--300: #EA6059; --sds--color--red--400: #DA362D; --sds--color--red--500: #83201B; // Orange. --sds--color--orange--100: #FFE6D2; --sds--color--orange--200: #FFC294; --sds--color--orange--300: #FF9A4E; --sds--color--orange--400: #E67300; --sds--color--orange--500: #C15500; } body { color: var(--sds--color--black); } // See "$color-palettes--support" for defined color-palettes. @each $name, $values in $color-palettes--support { .sds--color-palette--#{$name} { @include create-sds-palette-colors($name, $values); } }

Iconography

Svg's by default appear in the currently applicable color. If, for example, a dark-mode theme is applied and the color is set to white on a higher level, the svg will appear in white.

Icons are mostly placed close to text. The width and height of the svg can then best be set in "em", so they will scale relative the font-size. Icons on the demo below are in their original sizes. Most other applied icons on this demo-page are outputted in "em". The "em" size can be calculated by dividing the px-size by the current font-size. Alerts for example need icons with 22,5px width and height. So the "em" size will be 22,5/16 = 1,40625em

Demo

Functional icons

add

alarm-bell-off

alarm-bell

alert-circle

alert-diamond

alert-triangle

allowance-no-talking

arrow-corner-left

arrow-corner-right

arrow-down-2

arrow-down-3

arrow-down

arrow-left-2

arrow-left

arrow-right-2

arrow-right

arrow-up-2

arrow-up-3

arrow-up

bin

card-view

checkbox-check

duplicate

edit

go-to-other-website

id-1

id-2

info-2

info

list-or-table-view

lock

navigation-menu

shopping-cart-right

success

Illustrative icons

accounting

database-check

database-hand

database-refresh

database-setting

design-drawing

desktop-monitor

e-learning-book

e-learning-exchange

e-learning-laptop-2

e-learning-laptop

e-learning-monitor

euro

headphones

hierarchy-2

hierarchy

laptop-1

maze-strategy

multiple-circle

pie-graph-monitor

presentation-amphitheater

reading

recycling

school-test-results

science

shield-check

startegy-split

team-meeting

touch-id-approved

Code

HTML

<h5>Functional icons</h5> <div class="sds--grid-container"> <?php foreach (glob("./sds/assets/images/functional-icons/*.svg") as $filename) { $parts = pathinfo($filename); echo '<p class="sds--col--md--span-2 sds--col--lg--span-3 demo-row">' . file_get_contents($filename); echo '<span>' . $parts['filename'] . '</span>'; echo '</p>'; } ?> </div> <h5>Illustrative icons</h5> <div class="sds--grid-container"> <?php foreach (glob("./sds/assets/images/illustrative-icons/*.svg") as $filename) { $parts = pathinfo($filename); echo '<p class="sds--col--md--span-2 sds--col--lg--span-3 demo-row">' . file_get_contents($filename); echo '<span>' . $parts['filename'] . '</span>'; echo '</p>'; } ?> </div>

SCSS

svg { fill: currentColor; height: auto; overflow: visible; [stroke] { stroke: currentColor; } }

Layout

The page's max container width is applied by .sds--page-container. The grid is applied by .sds--grid-container. Elements inside can span a number of columns and start at a certain column. This can be done by applying classes (eg .sds--col--lg--span-8, .sds--col--md--span-2). These classes are specified per defined breakpoint. If no class is applied the element will span 1 column by default.

Spacings are defined as css-variable. The value of all spacing-variables are set on a high level (:root). If a space needs to be applied, you can do so by refering to the variable-name, or by applying classes (eg .sds--space--top--4 results in margin-top: 32px, .sds--space--right--1-and-a-half results in margin-right: 12px). The Card component makes use of spacing-classes.

Demo

Breakpoint "md" - "lg", span 2 of 6 columns. Breakpoint "lg" and up, span 4 of 12 columns. Note that "sm" is not applied so it takes 1 out of 2 columns.

Breakpoint "md" - "lg", span 4 of 6 columns. Breakpoint "lg" and up, span 8 of 12 columns. Note that "sm" is not applied so it takes 1 out of 2 columns.

Breakpoint "md" - "lg", span 5 of 6 columns. Breakpoint "lg" and up, span 6 of 12 columns. Note that "sm" is not applied so it takes 1 out of 2 columns.

Breakpoint "md" - "lg", span 1 of 6 columns. Breakpoint "lg" and up, span 2 of 12 columns and start at column 11. Note that "sm" is not applied so it takes 1 out of 2 columns.

Breakpoint "md" - "lg", span 2 of 6 columns. Breakpoint "lg" and up, span 4 of 12 columns and start at column 3. Note that "sm" is not applied so it takes 1 out of 2 columns.

Breakpoint "md" - "lg", span 4 of 6 columns. Breakpoint "lg" and up, span 4 of 12 columns. Note that "sm" is not applied so it takes 1 out of 2 columns.

SURFeduhub

Datadiensten

Prijs p.m.

€ 16.000,-

SURF contact

Sineke Vergeer

+31 1234 567 890

naam@surf.nl

Verbruik

Juli 2022 (gemeten tot vandaag)	146 van 200
Juni 2022	146 van 200
Mei 2022	146 van 200

Code

HTML

<div class="sds--grid-container"> <div class="demo-bg sds--col--md--span-2 sds--col--lg--span-4">Breakpoint "md" - "lg", span 2 of 6 columns. Breakpoint "lg" and up, span 4 of 12 columns. Note that "sm" is not applied so it takes 1 out of 2 columns.</div> <div class="demo-bg sds--col--md--span-4 sds--col--lg--span-8">Breakpoint "md" - "lg", span 4 of 6 columns. Breakpoint "lg" and up, span 8 of 12 columns. Note that "sm" is not applied so it takes 1 out of 2 columns.</div> </div> <div class="sds--grid-container"> <div class="demo-bg sds--col--md--span-5 sds--col--lg--span-6">Breakpoint "md" - "lg", span 5 of 6 columns. Breakpoint "lg" and up, span 6 of 12 columns. Note that "sm" is not applied so it takes 1 out of 2 columns.</div> <div class="demo-bg sds--col--md--span-1 sds--col--lg--span-2 sds--col--lg--start-11">Breakpoint "md" - "lg", span 1 of 6 columns. Breakpoint "lg" and up, span 2 of 12 columns and start at column 11. Note that "sm" is not applied so it takes 1 out of 2 columns.</div> </div> <div class="sds--grid-container"> <div class="demo-bg sds--col--md--span-2 sds--col--lg--span-4 sds--col--lg--start-3">Breakpoint "md" - "lg", span 2 of 6 columns. Breakpoint "lg" and up, span 4 of 12 columns and start at column 3. Note that "sm" is not applied so it takes 1 out of 2 columns.</div> <div class="sds--col--md--span-4 sds--col--lg--span-4"> <div class="demo-bg">Breakpoint "md" - "lg", span 4 of 6 columns. Breakpoint "lg" and up, span 4 of 12 columns. Note that "sm" is not applied so it takes 1 out of 2 columns.</div> <?php include("./sds/elements/components/card/markup/card.php"); ?> </div> </div>

SCSS

html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } .sds--page-container { width: calc(100% - #{$space-page-padding*2}); max-width: $width-grid-max; margin-left: auto; margin-right: auto; } .sds--grid-container { display: grid; gap: 0 var(--sds--space--3); // See "$grid-sizes" for defined grid-behavior. @each $grid-size, $settings in $grid-sizes { // The mixin "bp-em" can take 1 or 2 values, separated by a comma. // Therefore define variables so we can print the class-names easier. $bp-min: null; $bp-max: null; // Check if a range of breakpoints is defined, if not only use single breakpoint. @if map-get($settings, bp-range) { $bp-min: map-get(map-get($settings, bp-range), min); $bp-max: map-get(map-get($settings, bp-range), max); } @else { $bp-min: map-get($settings, bp); } // Define number of columns. @include bp-em($bp-min, $bp-max) { grid-template-columns: repeat(#{map-get($settings, columns)}, 1fr); } // Create util-classes to be able to place elements on the defined grid above. @for $i from 1 through map-get($settings, columns) { // Span a number of columns. // e.g. ".sds--col--lg--span-6". .sds--col--#{$grid-size}--span-#{$i} { @include bp-em($bp-min, $bp-max) { grid-column: span #{$i} / span #{$i}; } } } @for $i from 1 through map-get($settings, columns) { // Start at a specific column. // e.g. ".sds--col--md--start-3". .sds--col--#{$grid-size}--start-#{$i} { @include bp-em($bp-min, $bp-max) { grid-column-start: #{$i}; } } } } } // Spacing. :root { // Increments of base-value. @for $i from 1 through $space-scale-max { $value: rem($space-base-value*$i); --sds--space--#{$i}: #{$value}; } // Increments of base-value plus a half. @for $i from 1 through $space-half-scale-max { $value: rem($space-base-value*($i - 0.5)); --sds--space--#{$i - 1}-and-a-half: #{$value}; } } // Spacing util-classes. @for $i from 1 through $space-scale-max { @each $direction in $space-directions { .sds--space--#{$direction}--#{$i} { margin-#{$direction}: var(--sds--space--#{$i}); } } } @for $i from 1 through $space-half-scale-max { @each $direction in $space-directions { $value: #{$i - 1}-and-a-half; .sds--space--#{$direction}--#{$value} { margin-#{$direction}: var(--sds--space--#{$i - 1}-and-a-half); } } } .sds--visually-hidden { @include visually-hidden(); }

Logo

Demo

Default

Research

Default

Research

Code

HTML

<div class="demo-row"> <div class="sds--branding"> <span class="sds--branding--visual"> <?php include("./sds/assets/images/logo-surf.svg"); ?> </span> </div> <div class="sds--branding sds--branding--name-top"> <span class="sds--branding--visual"> <?php include("./sds/assets/images/logo-surf.svg"); ?> </span> <span class="sds--branding--textual">Default</span> </div> <div class="sds--branding sds--branding--name-bottom"> <span class="sds--branding--visual"> <?php include("./sds/assets/images/logo-surf.svg"); ?> </span> <span class="sds--branding--textual">Research</span> </div> </div> <div class="demo-bg demo-row"> <div class="sds--branding sds--branding--negative"> <span class="sds--branding--visual"> <?php include("./sds/assets/images/logo-surf.svg"); ?> </span> </div> <div class="sds--branding sds--branding--negative sds--branding--name-top"> <span class="sds--branding--visual"> <?php include("./sds/assets/images/logo-surf.svg"); ?> </span> <span class="sds--branding--textual">Default</span> </div> <div class="sds--branding sds--branding--negative sds--branding--name-bottom"> <span class="sds--branding--visual"> <?php include("./sds/assets/images/logo-surf.svg"); ?> </span> <span class="sds--branding--textual">Research</span> </div> </div>

SCSS

.sds--branding { display: flex; font-family: $font-nunito; font-weight: 700; font-size: rem(14px); &--negative { color: var(--sds--color--white); svg.logo-surf { .text { fill: var(--sds--color--black); } .shape { fill: var(--sds--color--white); } } } &--name-top { align-items: flex-start; line-height: calc(21/14); } &--name-bottom { align-items: flex-end; line-height: calc(12/14); gap: var(--sds--space--1); } &--visual { display: flex; flex-shrink: 0; } &--textual { flex-shrink: 0; } }

Typography

Styling is applied to generic tags: h1 - h6, p, a, ul and ol. Note that margin is removed from these elements. They recieve basic spacing when inside .sds--text--rich.

The class.sds--text--rich also applies the correct palette color and other styling to a link(a).

Heading styling can also be applied via classes (eg .sds--text--h2). Common text styling are available as classes(.sds--text--body, .sds--text--body--small and .sds--text--body--large).

Demo

Heading 1 tag

Heading 2 with heading 1 styling

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Body large

Body

Body small

Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Fusce fermentum. In hac habitasse platea dictumst. Nulla sit amet est. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci.

Curabitur turpis. Cras varius. Aenean ut eros et nisl sagittis vestibulum. Curabitur nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.

Chocolate Cake
- Chocolate Velvet Cake
- Chocolate Lava Cake
Black Forest Cake
Pineapple Cake

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam.

Fasten your seatbelt
Starts the car's engine
Look around and go
1. Check the blind spot
2. Check surrounding for safety

Pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. Donec sed nibh vitae lorem porttitor blandit in nec ante. Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada condimentum. Etiam in aliquam lectus. Nam vel sapien diam. Donec pharetra id arcu eget blandit.

Code

HTML

<div class="sds--text--rich"> <h1>Heading 1 tag</h1> <h2 class="sds--text--h1">Heading 2 with heading 1 styling</h2> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> <p class="sds--text--body--large">Body large</p> <p class="sds--text--body">Body</p> <p class="sds--text--body--small">Body small</p> <p>Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Fusce fermentum. In hac habitasse platea dictumst. Nulla sit amet est. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci.</p> <p>Curabitur turpis. Cras varius. Aenean ut eros et nisl sagittis vestibulum. Curabitur nisi. Class <a href="#">aptent taciti sociosqu</a> ad litora torquent per conubia nostra, per inceptos hymenaeos.</p> <ul> <li>Chocolate Cake <ul> <li>Chocolate Velvet Cake</li> <li>Chocolate Lava Cake</li> </ul> </li> <li>Black Forest Cake</li> <li>Pineapple Cake</li> </ul> <ul> <li><a href="#">Chocolate Cake</a></li> <li><a href="#">Black Forest Cake</a></li> <li><a href="#">Pineapple Cake</a></li> </ul> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam.</p> <ol> <li>Fasten your seatbelt</li> <li>Starts the car's engine</li> <li>Look around and go <ol> <li>Check the blind spot</li> <li>Check surrounding for safety</li> </ol> </li> </ol> <ol> <li><a href="#">Fasten your seatbelt</a></li> <li><a href="#">Starts the car's engine</a></li> <li><a href="#">Look around and go</a></li> </ol> <p>Pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. Donec sed nibh vitae lorem porttitor blandit in nec ante. Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada condimentum. Etiam in aliquam lectus. Nam vel sapien diam. Donec pharetra id arcu eget blandit.</p> </div>

SCSS

// Nunito @font-face { font-family: 'Nunito'; src: url('../fonts/Nunito/Nunito-Regular.woff2') format('woff2'), url('../fonts/Nunito/Nunito-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: fallback; } @font-face { font-family: 'Nunito'; src: url('../fonts/Nunito/Nunito-SemiBold.woff2') format('woff2'), url('../fonts/Nunito/Nunito-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: fallback; } @font-face { font-family: 'Nunito'; src: url('../fonts/Nunito/Nunito-Bold.woff2') format('woff2'), url('../fonts/Nunito/Nunito-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: fallback; } // Source Sans Pro @font-face { font-family: 'Source Sans Pro'; src: url('../fonts/Source_Sans_Pro/SourceSansPro-Regular.woff2') format('woff2'), url('../fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: fallback; } @font-face { font-family: 'Source Sans Pro'; src: url('../fonts/Source_Sans_Pro/SourceSansPro-SemiBold.woff2') format('woff2'), url('../fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: fallback; } @font-face { font-family: 'Source Sans Pro'; src: url('../fonts/Source_Sans_Pro/SourceSansPro-Bold.woff2') format('woff2'), url('../fonts/Source_Sans_Pro/SourceSansPro-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: fallback; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: $font-size-default; line-height: $line-height-default; } body { font-family: $font-default; } h1, .sds--text--h1 { font-family: $font-nunito; font-weight: 700; font-size: rem(36px); line-height: calc(42/36); margin: 0; } h2, .sds--text--h2 { font-family: $font-nunito; font-weight: 700; font-size: rem(30px); line-height: calc(36/30); margin: 0; } h3, .sds--text--h3 { font-family: $font-nunito; font-weight: 700; font-size: rem(24px); line-height: calc(30/24); margin: 0; } h4, .sds--text--h4 { font-family: $font-nunito; font-weight: 700; font-size: rem(20px); line-height: calc(30/20); margin: 0; } h5, .sds--text--h5 { font-weight: 700; font-size: rem(18px); line-height: calc(26/18); margin: 0; } h6, .sds--text--h6 { font-weight: 700; font-size: rem(16px); line-height: calc(24/16); margin: 0; } p { margin: 0; } a { &:link, &:visited { color: currentColor; } } ul { @include unstyled-list(); } ol { @include unstyled-list(); } .sds--text--rich { p { + * { margin-top: 1em; } } a { @include text-link(); } ul { @include styled-ul(); + * { margin-top: 1em; } } ol { @include styled-ol(); + * { margin-top: 1em; } } } .sds--text--body--large { font-size: rem(18px); line-height: calc(26/18); } .sds--text--body { font-size: rem(16px); line-height: calc(24/16); } .sds--text--body--small { font-size: rem(14px); line-height: calc(18/14); }

Organisms

Application-header

Note that .sds--page-container is applied twice on this demo page, which is not desirable, but just convenient. For the application-header component we normally assume to have full page-width so .sds--page-container, is needed inside. For the demo page it's convenient to have .sds--page-container on a high level, so for this demo page we breakout the application-header.

Demo

Productnaam

Code

HTML

<header class="sds--application-header sds--color-palette--red"> <div class="sds--page-container"> <div class="sds--application-header--inner"> <div class="sds--application-header--branding"> <div class="sds--branding sds--branding--name-bottom"> <span class="sds--branding--visual"> <?php include("./sds/assets/images/logo-surf.svg"); ?> </span> <span class="sds--branding--textual">Productnaam</span> </div> </div> <nav class="sds--application-header--nav"> <ul> <li class="is-active"> <a href="#"> <span class="text">Menu-item 1</span> <?php sizeable_svg("functional-icons/arrow-down-2", 11.25/16 . "em", 5.47/16 . "em"); ?> </a> <ul> <li> <a href="#">Sub-menu-item 1</a> </li> <li> <a href="#">Sub-menu-item 3</a> </li> <li> <a href="#">Sub-menu-item 4</a> </li> </ul> </li> <li> <a href="#">Menu-item 2</a> </li> <li> <a href="#">Menu-item 3</a> </li> <li> <a href="#">Menu-item 4</a> </li> </ul> </nav> <div class="sds--application-header--user"> <button type="button" class="sds--btn sds--btn--small sds--btn--ghost--dark">Login</button> </div> </div> </div> </header> <header class="sds--application-header sds--application-header--negative"> <div class="sds--page-container"> <div class="sds--application-header--inner"> <div class="sds--application-header--branding"> <div class="sds--branding sds--branding--negative sds--branding--name-bottom"> <span class="sds--branding--visual"> <?php include("./sds/assets/images/logo-surf.svg"); ?> </span> <span class="sds--branding--textual">Productnaam</span> </div> </div> <nav class="sds--application-header--nav"> <ul> <li class="is-active"> <a href="#">Menu-item 1</a> </li> <li> <a href="#">Menu-item 2</a> </li> <li> <a href="#"> <span class="text">Menu-item 3</span> <?php sizeable_svg("functional-icons/arrow-down-2", 11.25/16 . "em", 5.47/16 . "em"); ?> </a> <ul> <li> <a href="#">Sub-menu-item 1</a> </li> <li> <a href="#">Sub-menu-item 3</a> </li> <li> <a href="#">Sub-menu-item 4</a> </li> </ul> </li> <li> <a href="#">Menu-item 4</a> </li> </ul> </nav> <div class="sds--application-header--user"> <?php include("./sds/elements/additional/language-switcher/markup/language-switcher.php"); ?> <button type="button"> <?php sizeable_svg("functional-icons/alarm-bell", 18/16 . "em", 18/16 . "em"); ?> </button> <?php include("./sds/elements/additional/user-info/markup/user-info.php"); ?> </div> </div> </div> </header> <header class="sds--application-header sds--application-header--negative"> <div class="sds--page-container"> <div class="sds--application-header--inner"> <div class="sds--application-header--branding"> <div class="sds--branding sds--branding--negative sds--branding--name-bottom"> <span class="sds--branding--visual"> <?php include("./sds/assets/images/logo-surf.svg"); ?> </span> <span class="sds--branding--textual">Productnaam</span> </div> </div> <nav class="sds--application-header--nav"> <ul> <li class="is-active"> <a href="#">Menu-item 1</a> </li> <li> <a href="#">Menu-item 2</a> </li> <li> <a href="#"> <span class="text">Menu-item 3</span> <?php sizeable_svg("functional-icons/arrow-down-2", 11.25/16 . "em", 5.47/16 . "em"); ?> </a> <ul> <li> <a href="#">Sub-menu-item 1</a> </li> <li> <a href="#">Sub-menu-item 3</a> </li> <li> <a href="#">Sub-menu-item 4</a> </li> </ul> </li> <li> <a href="#">Menu-item 4</a> </li> </ul> </nav> <div class="sds--application-header--user"> <button type="button" class="sds--btn sds--btn--small sds--btn--ghost--light">Login</button> </div> </div> </div> </header> <header class="sds--application-header"> <div class="sds--page-container"> <div class="sds--application-header--inner"> <div class="sds--application-header--branding"> <div class="sds--branding sds--branding--name-bottom"> <span class="sds--branding--visual"> <?php include("./sds/assets/images/logo-surf.svg"); ?> </span> <span class="sds--branding--textual">Productnaam</span> </div> </div> <nav class="sds--application-header--nav"> <ul> <li class="is-active"> <a href="#"> <span class="text">Menu-item 1</span> <?php sizeable_svg("functional-icons/arrow-down-2", 11.25/16 . "em", 5.47/16 . "em"); ?> </a> <ul> <li> <a href="#">Sub-menu-item 1</a> </li> <li> <a href="#">Sub-menu-item 3</a> </li> <li> <a href="#">Sub-menu-item 4</a> </li> </ul> </li> <li> <a href="#">Menu-item 2</a> </li> <li> <a href="#">Menu-item 3</a> </li> <li class="is-open"> <a href="#"> <span class="text">Menu-item 4</span> <?php sizeable_svg("functional-icons/arrow-down-2", 11.25/16 . "em", 5.47/16 . "em"); ?> </a> <ul> <li> <a href="#">Sub-menu-item 1</a> </li> <li> <a href="#">Sub-menu-item 3</a> </li> <li> <a href="#">Sub-menu-item 4</a> </li> </ul> </li> </ul> </nav> <div class="sds--application-header--user"> <?php include("./sds/elements/additional/language-switcher/markup/language-switcher.php"); ?> <button type="button"> <?php sizeable_svg("functional-icons/alarm-bell", 18/16 . "em", 18/16 . "em"); ?> </button> <?php include("./sds/elements/additional/user-info/markup/user-info--logged-in.php"); ?> </div> </div> </div> </header>

SCSS

.sds--application-header { // Set variable to be able to nest "&" inside "&". $self: &; background-color: var(--sds--color--gray--200); &--inner { display: flex; gap: var(--sds--space--5); } &--branding { padding: var(--sds--space--1-and-a-half) 0; align-self: center; } &--user { padding: var(--sds--space--1-and-a-half) 0; margin-left: auto; @include align-icon-defaults(var(--sds--space--5), center); .sds--language-switcher { --lnk--base-color: var(--sds--palette--main-color--400); } .sds--user-info--dropdown { top: calc(100% + var(--sds--space--1-and-a-half)); } } &--nav { > ul { height: 100%; display: flex; gap: var(--sds--space--3); > li { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; border-bottom: rem(2px) solid transparent; // To position sub-menu. position: relative; > a { font-family: $font-nunito; font-weight: 700; @include align-icon-defaults(em(8px, 16), center); @include lnk-decoration(off); &:link, &:visited { @include lnk-color(var(--sds--color--gray--500), currentColor); } svg { [stroke-width] { stroke-width: rem(3px); } } } &.is-active { border-bottom-color: var(--sds--palette--main-color--400); > a { &:link, &:visited { @include lnk-color(var(--sds--palette--main-color--400), currentColor); } } } &.is-open { > a { svg { transform: rotate(180deg); } } } &:not(.is-open) { > ul { display: none; } } > ul { position: absolute; left: 0; top: calc(100% + #{rem(2px)}); width: rem(300px); background-color: var(--sds--color--white); padding: var(--sds--space--3); border-radius: 0 0 rem(6px) rem(6px); box-shadow: 0 rem(4px) rem(4px) 0 var(--sds--color--pitch-black--dimmed--25); > li { + li { margin-top: var(--sds--space--3); } > a { font-weight: 600; @include lnk-decoration(off); } } } } } } &--negative { background-color: var(--sds--palette--main-color--400); color: var(--sds--color--white); #{$self}--user { .sds--language-switcher { --lnk--base-color: var(--sds--color--white); } .sds--user-info { .sds--user-info--textual { .role { color: var(--sds--color--white); } } .sds--user-info--button { background-color: var(--sds--color--white); color: var(--sds--palette--main-color--400); } .sds--user-info--dropdown { color: var(--sds--color--black); } } } #{$self}--nav { > ul { > li { > a { &:link, &:visited { @include lnk-color(var(--sds--color--white)); } } > ul { color: var(--sds--color--black); } &.is-active { border-bottom-color: var(--sds--color--white); &:link, &:visited { @include lnk-color(var(--sds--color--white)); } } } } } } }

Footer

Note that .sds--page-container is applied twice on this demo page, which is not desirable, but just convenient. For the footer component we normally assume to have full page-width so .sds--page-container, is needed inside. For the demo page it's convenient to have .sds--page-container on a high level, so for this demo page we breakout the footer.

Demo

Code

HTML

<footer class="sds--footer sds--footer--multiple-bars"> <div class="sds--footer--top"> <div class="sds--page-container"> <nav class="menu"> <ul> <li> <a href="#"> <span class="text">Over SURF</span> <span class="icon--go-to-other-website"> <?php sizeable_svg("functional-icons/go-to-other-website", 16/14 . "em", 16/14 . "em"); ?> </span> </a> </li> <li> <a href="#">Werken bij</a> </li> <li> <a href="#">Contact en route</a> </li> </ul> </nav> </div> </div> <div class="sds--footer--bottom"> <div class="sds--page-container"> <div class="sds--footer--bottom--inner"> <nav class="menu"> <ul> <li> <a href="#">Auteursrecht</a> </li> <li> <a href="#"> <span class="text">Voorwaarden</span> <span class="icon--go-to-other-website"> <?php sizeable_svg("functional-icons/go-to-other-website", 16/14 . "em", 16/14 . "em"); ?> </span> </a> </li> <li> <a href="#">Cookies</a> </li> <li> <a href="#">Privacy</a> </li> <li> <a href="#">Disclaimer</a> </li> </ul> </nav> <?php include("./sds/elements/additional/language-switcher/markup/language-switcher.php"); ?> <div class="sds--branding sds--branding--negative"> <?php include("./sds/assets/images/logo-surf.svg"); ?> </div> </div> </div> </div> </footer> <footer class="sds--footer sds--footer--single-bar"> <div class="sds--page-container"> <div class="sds--footer--inner"> <nav class="menu sds--text--body--small"> <ul> <li> <a href="#">Terms of Use</a> </li> <li> <a href="#">Privacy policy</a> </li> </ul> </nav> <?php include("./sds/elements/additional/language-switcher/markup/language-switcher.php"); ?> <div class="sds--branding"> <?php include("./sds/assets/images/logo-surf.svg"); ?> </div> </div> </div> </footer>

SCSS

.sds--footer { // Set variable to be able to nest "&" inside "&". $self: &; &--single-bar { background-color: var(--sds--color--gray--200); padding: var(--sds--space--1-and-a-half) 0; #{$self}--inner { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sds--space--3) var(--sds--space--4); nav.menu { flex: 1 1 50%; a { font-weight: 600; &:link, &:visited { @include lnk-decoration(show); @include lnk-color(var(--sds--palette--support-color--400)); } } } .sds--language-switcher { flex-shrink: 0; } .sds--branding { flex: 1 1 50%; display: flex; justify-content: flex-end; } } } &--multiple-bars { .sds--footer--top { background-color: var(--sds--color--gray--200); padding-top: var(--sds--space--3); padding-bottom: var(--sds--space--3); nav { ul { justify-content: center; gap: var(--sds--space--1) var(--sds--space--3); } } } .sds--footer--bottom { background-color: var(--sds--color--black); color: var(--sds--color--white); padding-top: var(--sds--space--2); padding-bottom: var(--sds--space--2); .sds--footer--bottom--inner { display: flex; justify-content: space-between; align-items: center; gap: var(--sds--space--3) var(--sds--space--4); nav.menu { flex: 1 1 50%; ul { gap: var(--sds--space--1) var(--sds--space--4); } } .sds--language-switcher { flex-shrink: 0; } .sds--branding { flex: 1 1 50%; display: flex; justify-content: flex-end; } } } nav { font-family: $font-nunito; font-size: rem(14px); line-height: calc(19 / 14); ul { display: flex; flex-wrap: wrap; a { @include lnk-decoration(show); } } } } }

Object-header

Note that .sds--page-container is applied twice on this demo page, which is not desirable, but just convenient. For the object-header component we normally assume to have full page-width so .sds--page-container, is needed inside. For the demo page it's convenient to have .sds--page-container on a high level, so for this demo page we breakout the object-header.

Demo

Welkom John

Mijn portefeuille

Vandaag: 14 juli 2022

Detailpage title example with more than one line to show max length

Publication date: 3 april 2022
Expires: Never
Url: Hyperlink
Experience: 2 ratings

Code

HTML

<header class="sds--object-header"> <div class="sds--page-container"> <div class="sds--object-header--main"> <div class="sds--object-header--main--textual"> <h1>Welkom John</h1> </div> </div> </div> </header> <header class="sds--object-header sds--object-header--has-header sds--object-header--bg-is-lighter"> <div class="sds--page-container"> <div class="sds--object-header--header"> <div class="sds--space--bottom--2"> <?php include("./sds/elements/components/breadcrumb/markup/breadcrumb.php"); ?> </div> </div> <div class="sds--object-header--main"> <div class="sds--object-header--main--textual"> <h1>Mijn portefeuille</h1> <p class="sds--text--body--small sds--space--top--1">Vandaag: 14 juli 2022</p> </div> <div class="sds--object-header--input"> <?php include("./sds/elements/components/text-field/markup/text-field--search.php"); ?> </div> <div class="sds--object-header--actions"> <button type="button" class="sds--btn sds--btn--tertiary">Tertiary button</button> </div> </div> </div> </header> <header class="sds--object-header sds--object-header--has-header sds--object-header--has-footer"> <div class="sds--page-container"> <div class="sds--object-header--header"> <div class="sds--space--bottom--2"> <?php include("./sds/elements/components/breadcrumb/markup/breadcrumb.php"); ?> </div> </div> <div class="sds--object-header--main"> <div class="sds--object-header--main--visual"> <img src="" width=120 height=120> </div> <div class="sds--object-header--main--textual"> <h1>Detailpage title example with more than one line to show max length</h1> <?php include("./sds/elements/additional/metadata-list/markup/metadata-list.php"); ?> </div> <div class="sds--object-header--actions"> <button type="button" class="sds--btn sds--btn--primary">Primary button</button> <button type="button" class="sds--btn sds--btn--secondary">Secondary button</button> </div> </div> <div class="sds--object-header--footer"> <div class="sds--space--top--3"> <?php include("./sds/elements/components/tab-navigation/markup/tab-navigation--default.php"); ?> </div> </div> </div> </header>

SCSS

.sds--object-header { // Set variable to be able to nest "&" inside "&". $self: &; background-color: var(--sds--color--gray--200); &--bg-is-lighter { background-color: var(--sds--color--gray--100); } &:not(#{$self}--has-header) { padding-top: var(--sds--space--4); } &:not(#{$self}--has-footer) { padding-bottom: var(--sds--space--3); } &--header { .sds--breadcrumb { padding-top: var(--sds--space--1); } } &--main { display: flex; gap: var(--sds--space--5); #{$self}--input { flex: 1 1 auto; } #{$self}--actions { flex: 0 0 auto; margin-left: auto; display: flex; flex-direction: column; gap: var(--sds--space--2); } } }

SURF Design System

Additional

Language-switcher

Demo

Code

Metadata-list

Demo

Code

Table-basic

Demo

Code

User-info

Demo

Code

Components

Accordion

Demo

Code

Alert

Demo

Anatomy

Variants

Code

Back-to-top

Demo

Code

Backdrop

Demo

Code

Background-blur

Demo

Code

Badge-number

Demo

Code

Badge

Demo

Code

Block-switch

Demo

Vertical

Code

Breadcrumb

Demo

Code

Button

Demo

Anatomy

Variants

Formats

Code

Card

Demo

Verlengingen

ICT Inkoop - Licenties

SURF contact

SURFeduhub

Prijs p.m.

SURF contact

Verbruik

SURFeduhub

Prijs p.m.

SURF contact

Verbruik

Code

Checkbox

Demo

Code

Chips

Demo

Code

Contact-person

Demo

Code

Content-card

Demo

Title or product name

Title or product name

Title or product name

Code