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

Alert

Used to display important information.

How to use this component

Used within specific routes to highlight important information.

i.e.

  • On highways it’s used to force people to call C2C for emergencies rather than letting them continue report via the app
  • On HWRC used if the user is blocked and unable to continue

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:Alert HeadIcon="{x:Static styles:IconFont.Warning}"
                HeadIconColour="#E09919"
                HeadText="{x:Static resx:AppResources.LblMaxBooking}" />
  • HeadIcon
    • Sets the icon used
    • Default is String.Empty
  • HeadIconColour
    • Used to set the icon colour
    • Default is String.Empty
  • HeadText
    • Sets the text to be displayed
    • Default is String.Empty

How should this component look?