Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update empty state 404 documentation example to match new branding #5079

Merged
merged 7 commits into from
May 7, 2024
Merged

Update empty state 404 documentation example to match new branding #5079

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1dc47ab
make empty state docs consistent with c.com 404
jmuzina May 2, 2024
cbbd98f
fix empty state standalone
jmuzina May 6, 2024
a9b2947
fix error 404 docs indent size
jmuzina May 6, 2024
b1f3cbe
update empty state 404 scss docn
jmuzina May 7, 2024
d6132ad
update error management 404 empty state example to use new grid short…
jmuzina May 7, 2024
61a7c2d
update empty state 404 docn (remove hr, replace strip with hero)
jmuzina May 7, 2024
694ff84
update 404 error mgmt standalone scss
jmuzina May 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions scss/standalone/patterns_empty-state.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,6 @@
@include vf-p-icon-search;
@include vf-u-layout;

// dependencies for user action triggered empty state example
@include vf-u-vertically-center;
// Dependencies for error management empty state example
@include vf-u-hide;
@include vf-p-section;
20 changes: 11 additions & 9 deletions templates/docs/examples/patterns/empty-state/error-management.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,19 @@
{% block standalone_css %}patterns_empty-state{% endblock %}

{% block content %}
<section class="p-strip">
<div class="row">
<div class="col-6 col-medium-3 u-vertically-center u-align--center">
<img src="https://assets.ubuntu.com/v1/03c7318e-image-404.svg" alt="Page not found" width="360" height="365">
<section class="p-section--hero">
<div class="row--25-75">
<div class="col u-hide--small">
<p class="p-heading--1">404</p>
</div>
<div class="col-6 col-medium-3 u-vertically-center">
<div>
<h1>404: Page not found</h1>
<p class="p-heading--4">Sorry, we couldn’t find that page.</p>
</div>
<div class="col">
<h1><span class="u-hide--medium u-hide--large">404: </span>Page not found</h1>
bartaz marked this conversation as resolved.
Show resolved Hide resolved
<p class="p-heading--2">
We can't find the page you're looking for.
</p>
</div>
</div>
</section>
{% endblock %}


8 changes: 5 additions & 3 deletions templates/docs/patterns/empty-state.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,8 @@ To import either or all of these components into your project, copy the snippets
@import 'vanilla-framework';
@include vf-base;

// dependencies for the no content empty state example
// dependencies for no content empty state example
@include vf-p-headings;
@include vf-p-grid;
@include vf-u-align;
@include vf-p-buttons;
Expand All @@ -56,8 +57,9 @@ To import either or all of these components into your project, copy the snippets
@include vf-p-icon-search;
@include vf-u-layout;

// dependencies for user action triggered empty state example
@include vf-u-vertically-center;
// Dependencies for error management empty state example
@include vf-u-hide;
@include vf-p-section;
```

For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
Loading