Date: Fri, 29 Mar 2024 10:30:50 +0000 (UTC) Message-ID: <1117254493.1089.1711708250728@691d8d337504> Subject: Exported From Confluence MIME-Version: 1.0 Content-Type: multipart/related; boundary="----=_Part_1088_1755853735.1711708250728" ------=_Part_1088_1755853735.1711708250728 Content-Type: text/html; charset=UTF-8 Content-Transfer-Encoding: quoted-printable Content-Location: file:///C:/exported.html
The Seamless Access call to action can be presented as a static or dynam= ic component or =E2=80=9Cbutton=E2=80=9D* made up of the following basic el= ements:
Background
Icon
Stroke
Text
Text and institution name
(dynamic button only)
Add or change institution link
(dynamic button only)
We recommend using the standard button color, to ensure recognizability = across many sites implementing Seamless Access. You may also use the primar= y call-to action color in your design system, provided that you follow all = accessibility rules (particularly for color contrast) and use recognizable = elements of the Seamless Access button including, the icon, wording, and sp= acing.
SVG files can be colored and scaled in your code, or edited directly in = any vector-based design app like Adobe Illustrator or layout apps like Adob= e XD or Sketch.
Note that although the call to action is often described as a button, it= is technically a styled link and is not created using a UI button componen= t.
The limited implementation may use a static button presentation to link = to the SeamlessAccess central IdP Discovery service. Specifications and HTM= L to create the button are provided below.
Icon (same specs for all versions): 28px high (Centered= in first 50 px of button)
Vertical stroke: 32px high, 1px weight
Single line of text: Arial bold, 14px
(Sentence case)
Corner radius: 5px
Minimum width: 256px
Maximum width: 328px
Margins on either side of the text inside the button, should be not less= than 24px which includes 30 character spaces plus the ellipsis.
box-shadow CSS property injected by JS.
box-shaddow: 0 0 0 1px, 0 0 0 4px
;
<!--= Markup for the button. --> <div class=3D"d-flex sa-button" role=3D"button"> <div class=3D"sa-button-logo-wrap"> <img src=3D"https://service.seamlessaccess.org/sa-white.svg" class= =3D"sa-button-logo" alt=3D"Seamless Access Logo"/> </div> <div class=3D"d-flex justify-content-center align-items-center sa-butt= on-text text-truncate"> <div class=3D"sa-button-text-primary text-truncate">Access throug= h your institution</div> </div> </div> <!-- Markup for the "Add or change institution" link. --> <div class=3D"sa-access-text text-truncate"> <i class=3D"sa-cta-plus"><img src=3D"https://service.seamlessacc= ess.org/sa-pen.svg" alt=3D"Edit Icon"/></i> <div class=3D"sa-cta-access"><span>Add or Change Institution&= lt;/span></div> </div>
// Flex= box properties that keep button text centered horizontally and vertically. .d-flex { display: flex; } .align-items-center { align-items: center; } .justify-content-center { justify-content: center; } // Text truncation that keeps the button fully responsive. .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } // Button styling that utilizes Libre Franlin Google Font. .sa-button, .sa-access-text { font-family: Arial, sans-serif; line-height: 1.4; } .sa-button { cursor: pointer; background-color: var(--primary-blue); border-radius: 5px; padding: 9px; } .sa-button-logo-wrap { text-align: center; width: 50px; height: 100%; border-right: 1px solid var(--white); padding: 5px 5px 5px 0; } .sa-button-logo { width: 30px; vertical-align: middle; } .sa-button-text { padding-left: 10px; text-align: center; width: 85%; color: var(--white); } .sa-button-text-primary { font-size: 14px; font-weight: 700; } // Styling of the "Add or change institution" text under the button. .sa-access-text { cursor: pointer; text-align: center; width: 100%; margin-top: 5px; font-size: 13px; font-weight: 400; line-height: 1.46; color: var(--primary-blue); } .sa-cta-access, .sa-cta-plus { display: inline; padding: 0 3px; } .sa-cta-plus > img { height: 13px }
See Limited Implementat=
ion for additional implementation guidelines.
There are two ways to implement the dynamic button, through the standard implementation (iframe) or throu= gh the advanced imp= lementation (api).
Specifications for the button are provided below. The dynamic button has= two states: No remembered institution (sometimes called the =E2=80=9Ccold = state=E2=80=9D) and Remembered institution.
Single line of text: Arial bold, 14px
(Sentence case)
Icon (same specs for all versions): 28px high (Centered= in first 50 px of button)
Vertical stroke: 32px high, 1px weight
Corner radius: 5px
Minimum width: 256px
Maximum width: 328px
Two lines of text with button:
First line: Arial Regular, 13px
(Sentence case)
Second line: Arial bold, 14px
(Title Case)
Add/change link
Fontawesome icon, SVG file: 24px
Arial regular, 13px
(Sentence case)
For advanced implem= enters, the Add or change institution link should point to the remember= ed institution list which lets users:
select another saved institution
find and add another institution
Edit or remove a saved institution*
In a coming release, you may use the SeamlessAccess Edit screen by pointing=
to https://service.seamlessacces/ds?return=3D[your page url]&profile=
=3Dedit
For more deta=
ils on the Add or change institution experience, see Displaying and Editing Remembered Institutions
Long names should be truncated to fit the available width of the button = or the IdP discovery service results panel. The dynamic button is designed = to be responsive to the available display space and additional handling rul= es will be developed as the service is built out.
Institution names should truncate after a maximum of 32 characters, incl= uding spaces, followed by an ellipsis (=E2=80=A6) without a space.
Margins on either side of the text inside the button should be a minimum= of 24px, but can be more in the case of short institution names.
The recommended minimum button width is 256px (important for mobile scre= ens). This reduces character count to a maximum of 21 character spaces plus= the ellipsis.
The dynamic button should recognize a language parameter and display app= ropriate text.
The dynamic button may be added to a webpage by creating an i-frame that= calls the button from Seamless Access. See the section on the Standard Implementation for mo= re information.
The i-frame is responsive, however our recommendation is to provide spac= e with the following dimensions:
Width: 350px
Height: 85px
Break down of height:
Button Height: 55px
Margin at the bottom of the button: 3px
Link =E2=80=9CAdd or change institution=E2=80=9D: 18px
Margin at the top of the link: 5px
Extra space under the link to allow any overflow from the =E2=80=9Cpen= =E2=80=9D icon: 4px
The text inside of the button has built in truncation, therefore the wid= th is flexible (responsive), but our recommended width of 350px assists in = avoiding the truncation for most of lengthy institution names.
The Iframe packs the button and the link below without any outside margi= ns or padding, we recommend applying padding around the Iframe of at least = 6px, to prevent collision with other elements on a website.
<scrip= t src=3D=E2=80=9Chttps://use.thiss.io/thiss.js=E2=80=9D/> <div id=3D=E2=80=9Clogin=E2=80=9D> </div> <script> window.onload =3D function() { thiss.DiscoveryComponent({ loginInitiatorURL: =E2=80=98https://localhost/Shibboleth.sso/Log= in?target=3Dhttps://google.com=E2=80=99, }).render(=E2=80=98#login=E2=80=99); }; </script>
Color: The standard implementation has a default background and text/ico= n color, but you may override those default values by injecting parameters = into the script, available controls:
backgroundColor - controls the color of the iFrame where the button is r= endered
color - controls the color of the button
The following example will render a green button with white text:
<scr= ipt src=3D=E2=80=9Chttps://use.thiss.io/thiss.js=E2=80=9D/> <div id=3D=E2=80=9Clogin=E2=80=9D> </div> <script> window.onload =3D function() { thiss.DiscoveryComponent({ loginInitiatorURL: =E2=80=98https://localhost/Shibboleth.sso/Log= in?target=3Dhttps://google.com=E2=80=99, backgroundColor: '#008000', color: '#FFFFFF' }).render(=E2=80=98#login=E2=80=99); }; </script>
Language: The standard dynamic button should recognize a language parame= ter and display appropriate text.
See additional parameters and configurations required to implement= the standard button.
Use a consistent presentation of the =E2=80=9CAccess through your instit= ution=E2=80=9D button.