Cardiff Council Content and design system

www.cardiff.gov.uk

App

viewers

Pdf page viewerMarkdown viewMap Image

popups

How to: Animate a popupHow to: Create a popupSuccess popup (page removal)Message popupSuccess popup (and or go to new route)

pages

Base pageHome pageProcess pageDetails page

layout

Section headingDividerNoteMarginsError labelHeadingHighlightAlertNotifyAnimationTextStandard header iconsLinks

input

SwitchTime pickerPickerCheckboxText editorMapSearch bar with GPSSearch addressSearch barText entry

buttons

EditCancel buttonVertical transparent buttonVertical inverted buttonTag buttonCarousel buttonCallout button (Main)Vertical buttonNext / Back buttonsClose buttonInfo buttonFull button

accessibility

AutomationProperties.IsInAccessibleTreeAutomationProperties.NameAutomationProperties.HelpTextUseful docs

Notify

A temporary green banner used to highlight any changes in state.

How to use this component

Should be used to inform the user of an update if there is no obvious end of route success popup.
For instance if a booking has been saved or removed in the background, then we should inform the user of the outcome.


Code Resource


Deprecated: htmlentities(): Passing null to parameter #1 ($string) of type string is deprecated in /home/site/wwwroot/wp-content/themes/huntsman-child/single-mobile.php on line 96
<sections:UpdateMessage x:Name="UpdateMessage"
                        Margin="{StaticResource FormMargins}"
                        Padding="0,10,0,10" />
  • Text
    • Default is String.Empty
  • DurationSeconds
    • Default is 9
To show the alert simple do the following - 

UpdateMessage.Show();

How should this component look?