Readmore

For use when users elect to access more content.

Contents

• Basic
• Accessibility
• Content Design
• Props
• Events
• Methods
• CSS Shadow Parts
• CSS Custom Properties
• Slots

Basic

Use the readmore component to expand content linked to a field, or element inside a page. It is designed to take up minimal space so can be used to hide content in a form, or extra content users elect to read.

Accessibility

Ensure users with screen readers can easily navigate to the content inside the readmore expansion.

Content Design

When using the read more component, you must: write the heading and summary line like any other button text use sentence case describe the content that will show keep it short (screen readers might find it difficult to navigate the component if the button text is too long).

Do not use the read more component if: it’s content that all users need to see. you can simplify or reduce the amount of content.

Props

NameTypeDefaultDescriptionheadingstringundefinedThe text to display in the heading of the readmore component.

Events

NameDescriptionadmiraltyToggledThe event that is dispatched when the expanded status is toggled.

Methods

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS Custom Properties

NameDescription--admiralty-read-more-font-weightFont weight for the read more text

Slots

No slots available for this component.