A reference of reusable components for the A*STAR corporate website, with guidance on when to use.
Component
Accordian
Collapsible panels for sections and long supporting content. Keep title text short and scannable.
Supporting content appears here when the panel is expanded.
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
Supporting content appears here when the panel is expanded.
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
CTA Card 1
Two-column cards that lead to key pages. The whole card is clickable.
CTA Card 2
Three-column cards that lead to key pages. The whole card is clickable.
CTA Card 3 With Icon
Four-column cards with an icon, for industries or capabilities. Description is limited to 126 characters.
CTA Card with Image
Use for a featured article. Pair a strong image with a short summary and one clear action.
Image Card
Use in groups of three or four for related articles or themes.
Lightbox
Select an example to open the lightbox. Press Esc or click outside it to close.
For Calendar
A list of upcoming events, each showing date, venue and time.
MMM
D
Title
Location/Venue
TIME – TIME
View Details →
MMM
DD
Title
Location/Venue
TIME – TIME
View Details →
Typography
Heading hierarchy for readability, SEO and accessibility. Use one H1 per page and keep levels in order.
Profile Listing
Photo on top, text underneath, equal columns.
Name
Position
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Name
Position
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Name
Position
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Name
Position
Lorem ipsum dolor sit amet consectetur adipiscing elit dignissimos exercitation, exercitation at. Eos magna mollit veniam, id ea iusto culpa et eu aliquip elit esse eos. Sunt pariatur ad commodo fugiat consequat qui ipsum mollit, mollit est incididunt exercitation. Lorem proident quis exercitation ullamco ut, occaecat eiusmod amet in dolore cillum eos minim. Magna elit tempor sed qui vero irure cillum, voluptate mollit fugiat ea. Esse dolor nisi nostrud dolore sunt. Elit duis exercitation adipiscing accusamus dignissimos laborum.
Lightbox Example 1 ( With Notes)
- The name of title for FtLightboxTitle will auto capitalized.
-
Use a name instead of a number for DataModal in the properties of FtLightboxTitle and for data-target in the Anchor
<a href="#" data-toggle="lightbox" data-target="lightbox-alan">Click</a>
- Place FtLightbox in ContentPlaceholder
- Layout widgets can be placed in LightboxContentPlaceholder
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.