Back to All

View Link Styles

about 2 years ago by Jessie Tully

Live App Design settings that allow you to globally customize the style of links used throughout your live app’s views. This release includes some changes to note for those of you who rely on custom CSS.

New View Link Style Classes

The markup will remain the same, including the existing classes like .kn-text-link. We have added some new classes for these new links: 

  • .knViewLink__label
  • .knViewLink__icon
  • .knViewLink__icon--isLeft
  • .knViewLink__icon--isRight
  • .knViewLink--outlined
  • .knViewLink--filled
  • .knViewLink--raised
  • .knViewLink--size-medium
  • .knViewLink--size-large
  • .knViewLink--uppercase
  • .knViewLink--rounded
  • .knViewLink--border-thick

Removed Field Key Class for Action Links

During development, we found that a class based on the field key (e.g. .field_1) was being added to action links in detail views. This was incorrect (since action links are not directly associated with any given field), and therefor has been removed. This could potentially be a breaking change if anyone has been using those field keys as a selector.

Please continue using the Legacy view link style if you were relying on that class for customizations.

Underlined Hyperlinks

In the new Text style we fixed a bug that has been present for some time, where page links and action links did not have an underline. To ensure accessibility, that has been added back in. If you prefer not having the underline on your view links, use the Legacy style or copy this code into your app's CSS:

/* removes underline from all view links*/
#knack-body .knViewLink__label {
  text-decoration: none;
}

Release Notes

Release timing:
The client code was released on 01/31/2022 and the builder controls were released 02/03/2022.

Read more about the feature in our knowledge base here and join the conversation in our community forum.