Skip to content

Commit 7808a49

Browse files
weronikaolejniczakweronikaolejniczak
committed
fix(website): make guidelines of equal height in EuiEmptyPrompt
1 parent 8815898 commit 7808a49

1 file changed

Lines changed: 16 additions & 16 deletions

File tree

‎packages/website/docs/components/display/empty_prompt/guidelines.mdx‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -47,11 +47,11 @@ The vertical layout is perfect when the content is small — a title and two par
4747
Use the horizontal layout when you have a long description, multiple calls to action, and a footer. For this type of layout, an illustration is required.
4848

4949
<EuiFlexGroup gutterSize="m">
50-
<Guideline text="Use the vertical layout when the text is 1 to 2 sentences.">
51-
![Vertical layout](/images/empty_prompt/thumbnail_vertical.svg)
50+
<Guideline panelStyle={{ minHeight: 280 }} text="Use the vertical layout when the text is 1 to 2 sentences.">
51+
<img src="/images/empty_prompt/thumbnail_vertical.svg" alt="Vertical layout" height="252" />
5252
</Guideline>
53-
<Guideline text="Use the horizontal layout when you have a long description, and you can provide an illustration.">
54-
![Horizontal layout](/images/empty_prompt/thumbnail_horizontal.svg)
53+
<Guideline panelStyle={{ minHeight: 280 }} text="Use the horizontal layout when you have a long description, and you can provide an illustration.">
54+
<img src="/images/empty_prompt/thumbnail_horizontal.svg" alt="Horizontal layout" height="252" />
5555
</Guideline>
5656
</EuiFlexGroup>
5757

@@ -62,11 +62,11 @@ Icons and illustrations must first and foremost communicate meaning. They are al
6262
When using an illustration, bear in mind that they stand out a lot. Use one illustration per page. Having multiple illustrations might make the page too crowded.
6363

6464
<EuiFlexGroup gutterSize="m">
65-
<Guideline type="do" text="An illustration works better in a horizontal layout.">
66-
![Horizontal layout](/images/empty_prompt/thumbnail_icon-do.svg)
65+
<Guideline panelStyle={{ minHeight: 280 }} type="do" text="An illustration works better in a horizontal layout.">
66+
<img src="/images/empty_prompt/thumbnail_icon-do.svg" alt="Horizontal layout" height="252" />
6767
</Guideline>
68-
<Guideline type="dont" text="Avoid using icons and illustrations that don't mean anything and are not related to the content.">
69-
![No meaningful icon](/images/empty_prompt/thumbnail_icon-dont.svg)
68+
<Guideline panelStyle={{ minHeight: 280 }} type="dont" text="Avoid using icons and illustrations that don't mean anything and are not related to the content.">
69+
<img src="/images/empty_prompt/thumbnail_icon-dont.svg" alt="No meaningful icon" height="252" />
7070
</Guideline>
7171
</EuiFlexGroup>
7272

@@ -77,11 +77,11 @@ When using an illustration, bear in mind that they stand out a lot. Use one illu
7777
Include the link after the description when the empty prompt doesn't contain a call to action. If there is a call to action, include the link in the footer.
7878

7979
<EuiFlexGroup gutterSize="m">
80-
<Guideline text={`Add the "Learn more" link after the description when the empty prompt doesn't contain a call to action.`}>
81-
![Inline link](/images/empty_prompt/thumbnail_inline-link.svg)
80+
<Guideline panelStyle={{ minHeight: 280 }} text={`Add the "Learn more" link after the description when the empty prompt doesn't contain a call to action.`}>
81+
<img src="/images/empty_prompt/thumbnail_inline-link.svg" alt="Inline link" height="252" />
8282
</Guideline>
83-
<Guideline text={`Add the "Learn more" link in the footer when the empty prompt contains a call to action.`}>
84-
![Footer link](/images/empty_prompt/thumbnail_footer-link.svg)
83+
<Guideline panelStyle={{ minHeight: 280 }} text={`Add the "Learn more" link in the footer when the empty prompt contains a call to action.`}>
84+
<img src="/images/empty_prompt/thumbnail_footer-link.svg" alt="Footer link" height="252" />
8585
</Guideline>
8686
</EuiFlexGroup>
8787

@@ -92,10 +92,10 @@ When a page has multiple empty states, avoid using multiple primary actions and
9292
Use secondary actions and no icons or illustrations. This way, the visual noise will be reduced. Consider using an illustration or a primary action if you want to make one of the empty states stand out.
9393

9494
<EuiFlexGroup gutterSize="m">
95-
<Guideline type="do" text="Use secondary actions and no icons or illustrations when displaying multiple empty states.">
96-
![Vertical layout](/images/empty_prompt/thumbnail_multiple-do.svg)
95+
<Guideline panelStyle={{ minHeight: 280 }} type="do" text="Use secondary actions and no icons or illustrations when displaying multiple empty states.">
96+
<img src="/images/empty_prompt/thumbnail_multiple-do.svg" alt="Multiple empty states with secondary actions and no icons/illustrations" height="252" />
9797
</Guideline>
98-
<Guideline type="dont" text="Avoid mixing different types of empty states. Be consistent.">
99-
![Multiple empty states with primary actions and icons/illustrations](/images/empty_prompt/thumbnail_multiple-dont.svg)
98+
<Guideline panelStyle={{ minHeight: 280 }} type="dont" text="Avoid mixing different types of empty states. Be consistent.">
99+
<img src="/images/empty_prompt/thumbnail_multiple-dont.svg" alt="Multiple empty states with primary actions and icons/illustrations" height="252" />
100100
</Guideline>
101101
</EuiFlexGroup>

0 commit comments

Comments
 (0)